morgenbooster / responsive design 2.0 - mobile revolution / 9. oktober 2013

RESPONSIVE DESIGN 2.0 – MOBILE REVOLUTION

PETER SOLOW – HEAD OF INTERFACE DEVELOPMENT

FACEBOOK.COM/1508DK LINKEDIN.COM/COMPANY/1508-AS

9. OKTOBER 2013 MORGENBOOSTER

PROFORM TRAILRUNNER 4.0 TREADMILL


NU MED INDBYGGET BROWSER


OG SOM BORDPLADE


DET SKETE I DE DAGE…


DEN NYE NAVIGATION


ONE GIANT LEAP


GOOGLE’S GLASS

GOOGLE GLASSES


IWATCH


ALDRIG FØR HAR SÅ MANGE SURFET INTERNETTET MED SÅ MANGE FORSKELLIGE ENHEDER OG SÅ MANGE FORSKELLIGE BROWSERSTØRRELSER


Disruption will only accelerate. The quantity and diversity of connected devices—

many of which we haven’t imagined yet—will explode, as will the quantity and

diversity of the people around the world who use them.

FUTURE FRIENDLY

http://futurefriend.ly/

MOBIL VS STATIONÆR-BROWSING


I 2014 OVERSTIGER BRUGEN AF INTERNET VIA MOBILE ENHEDER BRUGEN VIA STATIONÆRE ENHEDER.

http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx

MOBILE ENHEDER SOM PRIMÆR INTERNET ACCESS POINT


D: 42%

UK: 42% USA: 67%

F: 40%

Q4: HOW DO YOU TYPICALLY GO ONLINE TO SURF THE WEB?

HTTP://ONDEVICERESEARCH.COM/BLOG/POST-PC-ERA-IN-THE-US-#STHASH.OASIRZ7D.DPBS

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk


39 FORSKELLIGE MOBIL-DEVICES


ZOOM LEVEL X 3

FONT-SIZE X 3

ORIENTATION X 2

SIZE = 30

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk


Ca. 1400 browserstørrelser

90% AF BRUGERNE SHUFFLER MELLEM ENHEDER


DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, AT BRUGERE BESØGER ET SITE I DEN ENE ELLER DEN ANDEN TILSTAND. BRUGERE BESØGER SITET I MANGE TILSTANDE.

http://ssl.gstatic.com/think/docs/multi-screen-world-infographic_infographics.pdf

YOU SNOOZE YOU LOSE


ALDRIG FØR HAR VI SAMLET SÅ MEGET DATA OM VORES BRUGERE, MEN VI VED STADIG INTET OM DEM, FØR DET ER FOR SENT



ALT DET VI IKKE VED – HVEM DE ER


ALT DET VI IKKE VED – HVAD DE LAVER


ALT DET VI IKKE VED – HVORDAN DE SER OS

TAK TIL BRAD FROST

HVOR, HVORNÅR OG HVORFOR


80% bruger mobil

under diverse nedetider...

76% bruger mobil, mens de venter i kø

eller på en aftale...


HTTPS://TWITTER.COM/TOMCOATES/STATUS/51734242991947778

Just been picked up at the airport by a limo

driver who looked me up on the Internet so

he'd recognize me and have stuff to talk

about. !!!


62% bruger mobil

mens de ser TV

69% bruger mobil til salgs-

research mens de køber ind


CONTEXT SPECIFIC BROWSING

MANGE AF DE FORUDINDTAGEDE IDEER VI HAR

HAFT OM BRUGEN AF MOBILE ENHEDER, HAR

VIST SIG IKKE AT HOLDE STIK

38 million Americans 'shop online on the toilet

82% of smartphone users check and send email with their device.

Google – “The Mobile Movement” (April 2011)

I’m definitely moving, I’m definitely in a car. I’m

going to look at your website. This doesn’t

mean my intent is to find an address, or quickly

use a news site...

CASE: FINANSMINISTERIET


RESPONSIVE DESIGN ER IKKE LÆNGERE EN MULIGHED, MAN KAN FRAVÆLGE


ANGIV EMNE

RESPONSIVE DESIGN FOR LET ØVEDE

25. Maj 2010 – A List Apart


1. A flexible, grid based layout

2. Flexible images and media, and

3. Media Queries

Ethan Marcotte, Responsive Web Design

ANGIV EMNE

TOOLS OF THE TRADE


HTML 5

CSS 3

JAVASCRIPT


Se videoen: https://vimeo.com/65717488

https://vimeo.com/65717488

https://vimeo.com/65717488

ANGIV EMNE

RESPONSIVE WEBDESIGN ER EN DELMÆNGDE AF ADAPTIVE

WEBDESIGN

“Adaptive web design is about creating interfaces that adapt to

the user’s capabilities (in terms of both form and function).

To me, Adaptive web design is just another term for progressive

enhancement…”


ADAPTIVE WEB DESIGN

RESPONSIVE

Aaron Gustafson, Adaptive Web Design

BUILD TO LAST


I LIKE AN ESCALATOR BECAUSE AN ESCALATOR

CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS.

-MITCH HEDBERG

ADAPTIVE WEB DESIGN


FEATURE DETECTION

DEVICE APIS

PERFORMANCE

CONDITIONAL LOADING

CONTENT STRATEGY

HTML5

TOUCH

ERGONOMICS

RWD

RESPONSIVE WEBDESIGN ER MEGET MERE END TEKNIK OG DESIGN

ET ÅR EFTER VERSION 1.0


MOBILE FIRST = CONTENT FIRST

FROM SITE TO SERVICE (SITE)


RESPONSIVE WEBDESIGN GÅR IKKE UD PÅ AT LAVE SMARTERE BEHOLDERE, MEN SMARTERE INDHOLD TIL BEHOLDERNE

INDHOLD I FOKUS


INDHOLDSSTRATEGI


Kristina Halvorson, Content Strategy for the Web

“Generally speaking, your web content is useless

unless it does one or both of the following:

- Supports a key business objective

- Supports a user (or customer) in completing a task”

INDHOLD OG PRIOTERING ER NØGLEN TIL ET BEDRE RESPONSIVE LIV


THE DEVICE LANDSCAPE IS CONSTANTLY CHANGING. CAPABILITIES ARE CONSTANTLY CHANGING. PROPERLY STRUCTURED CONTENT IS PORTABLE TO FUTURE PLATFORMS.

-STEPHEN HAY

PEOPLE'S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING


BRAD FROST - For a Future-Friendly Web (Mobilism 2012)

HAR DU NOGLE SINDE ØNSKET ET MERE KOMPLEKST LIV?

MORGENBOOSTER 9. OKTOBER 2013

HVORNÅR SÅ DU SIDST ET INTERFACE DER BARE VAR FOR ENKELT?


MORGENBOOSTER

VI ØNSKER ALLE ENKELTHED

MEN VI BLIVER FRISTET AF

KOMPLEKSITET

9. OKTOBER 2013

THANKS TO GILES COLBORNE

HVAD ER ENKELT?


DET GYLDNE SNIT


HVORDAN DET ER BYGGET


HVORDAN DET SER UD


HVORDAN DET FØLES AT BRUGE DET


ENKELTHED ER OPLEVELSESBASERET

MORGENBOOSTER

STÆRK

SVAG

HVORDAN DET FØLES AT BRUGE DET

HVORDAN DET ER LAVET

HVORDAN DET SER UD

9. OKTOBER 2013

MORGENBOOSTER

The Yerkes–Dodson law

9. OKTOBER 2013

CONTENT AND FORM ARE LOVERS, THEIR LOVE-CHILD IS DESIGN


MOBILE FIRST DESIGN.


I'M JUST GOING TO COME OUT AND SAY WHAT SOME OF US HAVE BEEN THINKING ABOUT RESPONSIVE DESIGN. IT BREEDS BORING.


Jonathan Longnecker

http://www.netmagazine.com/opinions/responsive-web-design-boring

“RWD COMES UNDER CRITICISM FOR NOT BEING COMMERCIALLY VIABLE. IT’S BECAUSE IT’S TRYING TO BE SHOE-HORNED INTO AN EXISTING, FIXED-CANVAS, INFLEXIBLE PROCESS.”

DEN PERFEKTE PROCES


Mark Boulton, on responsive workflow

DESIGN I BROWSEREN IKKE PÅ LÆRRED


• Photoshop filen ≠ Browser renderingen

• Flade filer er ikke interaktive

• Generelt mindre tværfaglighed

• Dyrt og endegyldigt

• Svært at forventningsafstemme

MOBILE FIRST

GODT RESPONSIVE WEBDESIGN KRÆVER EN INDGÅENDE FORSTÅELSE AF MEDIET


MOBILE FIRST WIREFRAMES


1

2

3

4

5

1

2

3

4

1

2

4

3

5

PROCESSEN – V. 0


PROCESSEN – V. 1.0



PROCESSEN – V. 2.0

STRATEGI INDSIGT KONCEPT

DIGITAL DESIGN

HTML

MOCKUP

SKETCH

WIREFRAME

INTERFACE

DESIGN

PROTOTYPE TEST

BASERET PÅ Pon Kattera Senior Interaction Designer

LIVE

PROTOTYPE

SCOPING


SCOPE BREAKDOWN

MAX 2 DAGE?

RESCOPE

RESPONSIVE FLOW


LEAN UX


RESPONSIVE WEBDESIGN HAR ÆNDRET VORES TILGANG TIL NETTET PÅ TVÆRS AF SAMTLIGE FAGDICIPLINER


JEG HAR EN FANTASTISK IDE TIL EN APP

DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, HVORVIDT VI SKAL UDVIKLE ”NATIVE ELLER RESPONSIVE”, MEN HVORDAN VI LAVER LØSNINGER, DER UNDERSTØTTER BÅDE MOBILE WEBSITES OG NATIVE APPS NU OG I FREMTIDEN


EXERGI


APP, MOBILE OG DESKTOP


DESPITE RESPONSIVE DESIGN ALREADY HAVING BEEN AROUND MORE THAN TWO YEARS, IT’S STILL IN MANY WAYS A FLEDGLING METHODOLOGY. DESIGNERS ARE FACED WITH AN EVER-CHANGING LANDSCAPE OF DEVICES, CODE FRAMEWORKS AND SCRIPTS – AND, OF COURSE, THE NEED TO WORK IN A NEW WAY WITH CLIENTS TO MANAGE THE PROCESS OF CREATING RESPONSIVE WEBSITES.

RESPONSIVE WEBDESIGN – UDFORDRINGER OG LØSNINGER


James Young –

http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

DE MEST ALMINDELIGE PROBLEMER MED RESPONSIVE WEB DESIGN

1. EXPLAINING RWD TO CLIENTS

2. THE LACK OF A STATIC DESIGN PHASE

3. NAVIGATION

4. IMAGES

5. TABLES

6. CONVERTING OLD FIXED-WIDTH SITES

7. WHAT TO SERVE USERS OF OLD VERSIONS OF IE

8. TESTING TIME AND COST


RESPOSNIVE DESIGN IS NOT A PANACEA

RATHER A GREAT STEP IN THE RIGHT DIRECTION


BRAD FROST

Blank slide

TAK

@PSOLOW

1508.DK

NÆSTE MORGNEBOOSTER 30. OKTOBER:

DESIGNING FOR INSIGHTS

– HVAD HAR DIT WEBSITE LÆRT DIG I DAG?

morgenbooster / responsive design 2.0 - mobile revolution / 9. oktober 2013

Business