Responsive Design 2014 / Morgenbooster

23. APRIL 2014 MORGENBOOSTER



PROFORM PERFORMANCE 1450 TREADMILL


10" FULL-COLOR TOUCHSCREEN

DELUXE EXPERIENCE

NOW YOU CAN GET ONLINE WHILE YOU WORK OUT. CONNECT TO YOUR HOME'S WIRELESS NETWORK TO CHECK THE NEWS, READ EMAIL, WATCH SPORTS HIGHLIGHTS, SOCIALIZE ON FACEBOOK, AND MORE WITH THIS 10-INCH TOUCH SCREEN WITH BROWSER POWERED BY ANDROID™.


1508.DK – ON THE MOVE


TILBAGE TIL FORTIDEN - ANNO 1993



30. APRIL 1993

11. NOVEMBER 1993



WEBDESIGN ANNO 1999








IWATCH


ALDRIG FØR HAR SÅ MANGE MENNESKER SURFET PÅ NETTET PÅ SÅ MANGE FORSKELLIGE ENHEDER, OG MED SÅ MANGE FORSKELLIGE OPLØSNINGER.


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/

MOBILE VS. DESKTOP BROWSING


I 2014 VIL ADGANG TIL INTERNETTET VIA MOBILE ENHEDER OVERGÅ DESKTOP-ADGANG

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

MOBILENHEDER SOM PRIMÆR INTERNETADGANGSPUNKT


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

55% AF AL TID BRUGT PÅ DETAILHANDELSSTEDER FOREGÅR PÅ EN MOBIL ENHED


Mobile

55%

Desktop

45%

Time spent

COMSCORE, OKTOBER 2013

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk


68 FORSKELLIGE MOBILE ENHEDER

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk


Ca.. 4500 Browserstørrelser


ZOOM LEVEL X 3

FONT-SIZE X 3

ORIENTATION X 2

SIZE = 30

90% AF WEB-BRUGERE, DER BÅDE HAR MOBIL- OG STATIONÆR-ADGANG, SKIFTER MELLEM ENHEDER


DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, HVORVIDT BRUGEREN VIL FÅ VIST WEBSTEDET I EN TILSTAND ELLER EN ANDEN. BRUGEREN VIL SANDSYNLIGVIS BESØGE WEBSTEDET I FLERE TILSTANDE PÅ FORSKELLIGE ENHEDER.

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

YOU SNOOZE YOU LOSE


SCHUH.EU


TAMMY EVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE

HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/


TAMMY EVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE

HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/

ALDRIG FØR ER SÅ MEGET DATA INDSAMLET OM VORES BRUGERE, MEN VI VED STADIG IKKE RET MEGET 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 MØDER OS

TAK TIL BRAD FROST

HVOR, HVORNÅR OG HVORDAN


80% bruger mobil ved

diverse nedetid ...

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

salgsstedet mens de shopper

DEVICE CONTEXT VS.USER INTENT


MOBILE ISN'T JUST 'MOBILE'. IT'S ALSO THE COUCH, THE KITCHEN, THE THREE-HOUR LAYOVER, ALL

PLACES WHERE WE HAVE TIME AND ATTENTION TO SPARE. 42 PER CENT OF MOBILE USERS SAY

THEY USE IT FOR ENTERTAINMENT WHEN THEY'RE BORED. THOSE AREN'T 10-SECOND SESSIONS.

THAT MEANS WE SHOULDN'T DESIGN ONLY FOR STUNTED SESSIONS OR LIMITED USE CASES.

JOSH CLARK: WHY JAKOB NIELSEN IS WRONG ON MOBILE

http://www.creativebloq.com/josh-clark-why-jakob-nielsen-wrong-mobile-4124168


CONTEXT SPECIFIC BROWSING

MANGE AF DE FORDOMME, VI HAVDE OM

KONTEKST SPECIFIK BROWSING HOLDER IKKE.

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: HUSET MARKEDSFØRING






RESPONSIVE DESIGN ER IKKE LÆNGERE EN MULIGHED, SOM VI KAN VÆLGE AT IGNORERE


RESPONSIVE DESIGN 101


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

TOOLS OF THE TRADE


HTML 5

CSS 3

JAVASCRIPT



NYE SKÆRMSTØRRELSER = NYE INPUT-STØRRELSER

22. OKTOBER 2013 ARKITEKTSKOLEN AARHUS: PRÆSENTATION

NYE INTERAKTIONER


DEN NYE NAVIGATION



BUILD TO LAST


I LIKE AN ESCALATOR BECAUSE AN ESCALATOR

CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS.

-MITCH HEDBERG

“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…”

RESPONSIVE WEBDESIGN ER ET SUB-SET ADAPTIVE WEBDESIGN


ADAPTIVE WEB DESIGN

RESPONSIVE

Aaron Gustafson, Adaptive Web Design

ADAPTIVE WEB DESIGN


FEATURE DETECTION

DEVICE APIS

PERFORMANCE

CONDITIONAL LOADING

CONTENT STRATEGY

HTML5

TOUCH

ERGONOMICS

RWD

RESPONSIVE WEBDESIGN ER MEGET MERE END TEKNIK

ET ÅR EFTER VERSION 1.0


MOBILE FIRST = CONTENT FIRST

FROM SITE TO SERVICE (SITE)


http://www.flickr.com/photos/teromakotero/8705861207

RESPONSIVE WEB DESIGN HANDLER IKKE OM AT LAVE SMARTERE BEHOLDERE, MEN OM AT LAVE SMARTERE INDHOLD TIL BEHOLDERNE

INDHOLD I FOKUS


FRAGMENTING OUR CONTENT ACROSS DIFFERENT “DEVICE-

OPTIMIZED” EXPERIENCES IS A LOSING PROPOSITION, OR AT

LEAST AN UNSUSTAINABLE ONE.

—ETHAN MARCOTTE RESPONSIVE WEB DESIGN



The device landscape is constantly

changing. Capabilities are constantly

changing. Properly structured content is

portable to future platforms.

Stephen Hay

COPE: CREATE ONCE PUBLISH EVERYWHERE



THE INTERNET OF THINGS


PEOPLE'S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING


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

CONTENT STRATEGY


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”

SIMPLICITY IS THE KEY TO A BETTER LIFE

“ESSENTIALLY WHAT IS THE MESSAGE

THAT NEEDS TO BE COMMUNICATED

IF I WAS ONLY ABLE TO PROVIDE

THE USER WITH UNSTYLED HTML?”

— BRYAN RIEGER


HVOR OFTE ØNSKER DU AT DIT LIV VAR MERE KOMPLEKST?

MORGENBOOSTER 23. APRIL 2014

HVORNÅR BAD DU SIDST OM EN MERE KOMPLEKS BRUGERGRÆNSEFLADE?


MORGENBOOSTER

VI ØNSKER ALLE ENKELHED

MEN VI BLIVER FRISTET AF

KOMPLEKSITET

23. APRIL 2014

HVAD ER ENKELT?


LOGARITHMIC SPIRAL – THE GOLDEN RECTANGLE


HVORDAN DET ER BYGGET


HVORDAN DET SER UD


HVORDAN DET BRUGES


ENKELTHED ER OPLEVELSE

MORGENBOOSTER

STÆRK

SVAG

HVORDAN DET FØLES AT BRUGER DET

HVORDAN DET ER BYGGET

HVORDAN DET SER UD

23. APRIL 2014

DKS: RESPONSIVE AND BEYOND

Expert

Fokus på detaljer

Perfektion

Præcis styring

Principper

Tag det fra hinanden

Detaljeret mental model

Invester tid i at lære

Mainstreamer

Fokus på mål

Afslutning?

Nem kontrol

Eksempler, fortællinger?

Bange for at ødelægge

Løs mental model

Hvad betyder SLDM?

OCTOBER 3RD 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

GENERALLY SPEAKING, A COMP IS A COMPREHENSIVE, HIGH FIDELITY, PHOTOSHOPPED LAYOUT OF A WEBSITE—OR RATHER, WHAT APPEARS TO BE A WEBSITE.

BUILDING A BETTER USER EXPERIENCE BY DESIGNING IN THE BROWSER


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

THE COMP IS DEAD!


“I don’t think we’re in post-PSD era,

but I do think we’re movin towards

post-‘full-comp’ era.”

DAN MALL - RESPONSIVE DESIGN IS HARD/EASY! BE AFRAID/DON'T WORRY!

LONG LIVE THE STYLETIL.ES


Style Tiles are a design deliverable consisting of fonts,

colors and interface elements that communicate the

essence of a visual brand for the web.

MORGENBOOSTER

No matter how cool

your user interface...

...it would be better if there

were less of it

Alan Cooper Father of Visual Basic,

23. APRIL 2014

“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

PROCESSEN – V. 0



PROCESSEN – V. 1.0








STRATEGI INDSIGT KONCEPT

DIGITAL DESIGN

HTML

MOCKUP

SKETCH

WIREFRAME

INTERFACE

DESIGN

PROTOTYPE TEST

BASERET PÅ Pon Kattera Senior Interaction Designer

LIVE

PROTOTYPE

INDHOLD

LEAN UX


LEAN UX


LEAN UX


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 WEBDESIGN

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

NÆSTE MORGENBOOSTER:

DIGITAL STRATEGI: EKSEKVER,

EKSEKVER, EKSEKVER.

DATO: 14. MAJ 2014


Blank slide

TAK

@PSOLOW

1508.DK

Date post:	01-Nov-2014
Category:	Technology
Upload:	1508-as
View:	810 times
Download:	2 times

Responsive Design 2014 / Morgenbooster

Technology