Konference / Huset Markedsføring / Responsive design

Introslide: Start alle præsentationer med denne RESPONSIVE

DESIGN

HUSET MARKEDSFØRING

VED PETER SOLOW & HJØRDIS THORBORG

Dagsorden: Vis emner og evt. underemner der gennemgåes

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN 21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

130 WEBSITES

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

2.738 WEBSITES

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

22. JUNI 2012

23.500 WEBSITES

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

~ 367.000.000 WEBSITES

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Dagsorden: Vis emner og evt. underemner der gennemgåes

RESPONSIVE WEB DESIGN

”AT IT’S MOST BASIC LEVEL, RESPONSIVE DESIGN IS ABOUT SERVING ONE HTML DOCUMENT TO COUNTLESS BROWSERES AND DEVICES...”

Ethan Marcotte, Responsive web design

Forretnings-område: Billeder bør ikke udskiftes, medmindre de er direkte misvisende for emnet du præsenterer.

Dagsorden: Vis emner og evt. underemner der gennemgåes

RESPONSIVE DESIGN

21. JUNI 2012

Dagsorden: Vis emner og evt. underemner der gennemgåes

DESIGNOPMENT

”…COMBINING DESIGN AND DEVELOPMENT INTO ONE HYBRID PHASE, BRINGING THE TWO TEAMS INTO ONE HIGHLY COLLABORATIVE GROUP.”

Ethan Marcotte, Responsive web design

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

MODUL IA

RESPONSIVE DESIGN

21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

LIVE MOCKUP – BREAKPOINT IDENTIFIKATION

RESPONSIVE DESIGN

1240 PX 768 PX 320 PX

21. JUNI 2012

Forretnings-område: Billeder bør ikke udskiftes, medmindre de er direkte misvisende for emnet du præsenterer.

Forretnings-område: Billeder bør ikke udskiftes, medmindre de er direkte misvisende for emnet du præsenterer.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

21. JUNI 2012

Kapitel: Benyttes som kapitel intro

ET DESIGNBLIK PÅ RESPONSIVE WEB DESIGN

RESPONSIVE DESIGN 21. JUNI 2012

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

DESIGN + DEVELOPMENT

= DESIGNOPMENT

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

RESEARCH DESIGNER

STRATEGISK DESIGNER

UX-DESIGNER

INTERAKTIONSDESIGNER

CO-DESIGNER

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

Kapitel: Benyttes som kapitel intro

WEB DESIGN TRENDS

RESPONSIVE DESIGN 21. JUNI 2012

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

WEB DESIGN TRENDS IN 2011

(WEB DESIGN LEDGER)

21. JUNI 2012 RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

WEB DESIGN TRENDS 2011

1.  MORE CSS3 + HTML5

2.  SIMPLE COLOR SCHEMES

3.  MOBILE READY

4.  PARALLAX SCROLLING

5.  DESIGNING FOR TOUCH SCREENS, NOT MICE

6.  DEPTH PERCEPTION IN WEB DESIGN

7.  LARGE PHOTOGRAPHIC BACKGROUNDS

8.  ADVENTUROUS DOMAIN NAMES & INTEGRATION

9.  QR: QUICK RESPONSE

10.  THUMBNAIL DESIGN

11.  CONSTANT CONNECTION/ LIFE STREAM

RESPONSIVE DESIGN 21. JUNI 2012

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

WEB DESIGN TRENDS IN 2012

(WEB DESIGN LEDGER)

21. JUNI 2012 RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

WEB DESIGN TRENDS 2012

1.  RESPONSIVE WEB DESIGN

2.  FIXED-POSITION NAVIGATION

3.  CIRCLES

4.  BIG VECTOR ART

5.  MULTI-COLUMN MENUS

6.  JQUERY/CSS3/HTML5 ANIMATION

7.  RIBBONS & BANNER GRAPHICS

8.  CUSTOM FONT FACES

9.  INFOGRAPHICS

10.  FOCUS ON SIMPLICITY

RESPONSIVE DESIGN 21. JUNI 2012

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

CSS3 + HTML5

BÅNDBREDDE

BROWSERSTANDARDER

(SKÆRMSTØRRELSE)

KONVENSIONER

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

FORM FOLLOWS FUNCTION

FORM FOLLOWS MEANING

(KLAUS KRIPPENDORFF)

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

“YOU WANT [NEW TECHNOLOGY] TO

BECOME A MORE FUNDAMENTAL

PART OF YOUR LIFE, AND YOU WANT

PLEASURABLE THINGS … ARTWORKS,

AND PHOTOGRAPHS … WE WANT THAT

OUT OF OUR TECHNOLOGY TOO.”

(DONALD NORMAN)

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

WEB DESIGN TRENDS 2012

1.  RESPONSIVE WEB DESIGN

2.  FIXED-POSITION NAVIGATION

3.  CIRCLES

4.  BIG VECTOR ART

5.  MULTI-COLUMN MENUS

6.  JQUERY/CSS3/HTML5 ANIMATION

7.  RIBBONS & BANNER GRAPHICS

8.  CUSTOM FONT FACES

9.  INFOGRAPHICS

10.  FOCUS ON SIMPLICITY

RESPONSIVE DESIGN 21. JUNI 2012

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

15 TOP WEB DESIGN AND

DEVELOPMENT TRENDS FOR 2012

(.NET MAGAZINE)

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

WEB DESIGN AND DEVELOPMENT TRENDS 2012

1.  PROGRESSIVE ENHANCEMENT

2.  RESPONSIVE DESIGN

3.  FLASH WILL SURVIVE

4.  NATIVE SUPPORT FOR PLUG-IN FEATURES

5.  APPIFICATION TAKES HOLD

6.  WEB APP FRAGMENTATION

7.  MOBILE GETS BIGGER

8.  A DEVICE EXPLOSION

9.  RESPECT BEYOND AESTHETICS

10.  SOCIAL BATTLES HEAT UP

11.  GROWTH OF THE TWO-SCREEN MODEL

RESPONSIVE DESIGN 21. JUNI 2012

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

“THE WEB HAS MOVED BEYOND

THE DESKTOP AND

IT’S NOT MOVING BACK”

(ETHAN MARCOTTE)

21. JUNI 2012 RESPONSIVE DESIGN

Kapitel: Benyttes som kapitel intro

VISUEL IDENTITET PÅ DIGITALE PRÆMISSER

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

RESPONSIVE WEB DESIGN

CASES

21. JUNI 2012 RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

LOGO SOM MÆRKE

CASES

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

MIT MEDIA LAB

CASE

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

CX

CASE

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

WORDPRESS

CASE

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

Illustration / site: Du kan selv tilføje markeringspile fra elementarket.

Kapitel: Benyttes som kapitel intro

BRANDING & RESPONSIVE WEB DESIGN

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

“WE CAN EMBRACE THE

FLEXIBILITY INHERENT TO THE

WEB, WITHOUT SURRENDERING

THE CONTROL WE REQUIRE

AS DESIGNERS”

(ETHAN MARCOTTE)

21. JUNI 2012 RESPONSIVE DESIGN

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

CBS

CASE

21. JUNI 2012 RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

Indholdsslide: Almindelig indholdsside med punktopstilling

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

MORGENBOOSTER

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Statements: Identitetsskabende statements eller vigtige postulater vises på denne type slide. Benyt evt. hvid baggrund eller fotobaggrunde fra serveren.

RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling

21. JUNI 2012 RESPONSIVE DESIGN

Forretnings-område: Billeder bør ikke udskiftes, medmindre de er direkte misvisende for emnet du præsenterer.

Forretnings-område: Billeder bør ikke udskiftes, medmindre de er direkte misvisende for emnet du præsenterer.

Forretnings-område: Billeder bør ikke udskiftes, medmindre de er direkte misvisende for emnet du præsenterer.

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

“I THINK WHAT IS

HAPPENING ON THE WEB,

THE INTERNET,

IS THAT IN SOME SENSE IT’S

DISAPPEARING”

(DONALD NORMAN)

Delafsnit: Afsnit under kapitler. Husk at angive aktuelt kapitel

“I WOULD LIKE TO SEE

WEB DESIGNERS DISAPPEAR

AND BECOME DESIGNERS …

IT’S NOT WEB DESIGN, IT’S

INFORMATION DESIGN,

COMMUNICATION DESIGN.”

(DONALD NORMAN)

Kapitel: Benyttes som kapitel intro

RESPONSIVE WEB DESIGN SET FRA ET KUNDEPERSPEKTIV

21. JUNI 2012 RESPONSIVE DESIGN

Indholdsslide: Almindelig indholdsside med punktopstilling 1.  BETYDNING FOR TILBUD OG BUDGET

2.  RESPONSIVE WEB DESIGN I ONLINE STRATEGI

3.  DYNAMISKE PRINCIPPER I DESIGN KONCEPT

4.  “LIVE” PROTOTYPE DEL AF DEN AGILE PROCES

5.  “LIVE” VISNING PÅ DESIGN PRÆSENTATIONER

6.  HTML SOM DESIGN LEVERANCE

7.  TILPASNING TVÆRS AF DEVICES = VÆRDISKABELSE

8.  FREMTIDSSIKRING

RESPONSIVE DESIGN 21. JUNI 2012

Kapitel: Benyttes som kapitel intro

SPØRGSMÅL

21. JUNI 2012 RESPONSIVE DESIGN

Introslide:

Start alle

præsentationer med

denne

Introslide:

Start alle

præsentationer med

denne

Introslide:

Start alle

præsentationer med

denne TAK!

..

RESPONSIVE DESIGN 21. JUNI 2012