morgenbooster / responsive design 2.0 - mobile revolution / 9. oktober 2013
Post on 08-May-2015
793 Views
Preview:
TRANSCRIPT
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
9. OKTOBER 2013 MORGENBOOSTER
NU MED INDBYGGET BROWSER
9. OKTOBER 2013 MORGENBOOSTER
OG SOM BORDPLADE
9. OKTOBER 2013 MORGENBOOSTER
DET SKETE I DE DAGE…
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
DEN NYE NAVIGATION
9. OKTOBER 2013 MORGENBOOSTER
ONE GIANT LEAP
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
GOOGLE’S GLASS
GOOGLE GLASSES
9. OKTOBER 2013 MORGENBOOSTER
IWATCH
9. OKTOBER 2013 MORGENBOOSTER
ALDRIG FØR HAR SÅ MANGE SURFET INTERNETTET MED SÅ MANGE FORSKELLIGE ENHEDER OG SÅ MANGE FORSKELLIGE BROWSERSTØRRELSER
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
39 FORSKELLIGE MOBIL-DEVICES
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
Ca. 1400 browserstørrelser
90% AF BRUGERNE SHUFFLER MELLEM ENHEDER
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
ALT DET VI IKKE VED – HVEM DE ER
9. OKTOBER 2013 MORGENBOOSTER
ALT DET VI IKKE VED – HVAD DE LAVER
9. OKTOBER 2013 MORGENBOOSTER
ALT DET VI IKKE VED – HVORDAN DE SER OS
TAK TIL BRAD FROST
HVOR, HVORNÅR OG HVORFOR
9. OKTOBER 2013 MORGENBOOSTER
80% bruger mobil
under diverse nedetider...
76% bruger mobil, mens de venter i kø
eller på en aftale...
9. OKTOBER 2013 MORGENBOOSTER
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. !!!
9. OKTOBER 2013 MORGENBOOSTER
62% bruger mobil
mens de ser TV
69% bruger mobil til salgs-
research mens de køber ind
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
CASE: FINANSMINISTERIET
9. OKTOBER 2013 MORGENBOOSTER
CASE: FINANSMINISTERIET
9. OKTOBER 2013 MORGENBOOSTER
RESPONSIVE DESIGN ER IKKE LÆNGERE EN MULIGHED, MAN KAN FRAVÆLGE
9. OKTOBER 2013 MORGENBOOSTER
ANGIV EMNE
RESPONSIVE DESIGN FOR LET ØVEDE
25. Maj 2010 – A List Apart
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
HTML 5
CSS 3
JAVASCRIPT
9. OKTOBER 2013 MORGENBOOSTER
Se videoen: 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…”
9. OKTOBER 2013 MORGENBOOSTER
ADAPTIVE WEB DESIGN
RESPONSIVE
Aaron Gustafson, Adaptive Web Design
BUILD TO LAST
9. OKTOBER 2013 MORGENBOOSTER
I LIKE AN ESCALATOR BECAUSE AN ESCALATOR
CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS.
-MITCH HEDBERG
ADAPTIVE WEB DESIGN
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
MOBILE FIRST = CONTENT FIRST
FROM SITE TO SERVICE (SITE)
9. OKTOBER 2013 MORGENBOOSTER
RESPONSIVE WEBDESIGN GÅR IKKE UD PÅ AT LAVE SMARTERE BEHOLDERE, MEN SMARTERE INDHOLD TIL BEHOLDERNE
INDHOLD I FOKUS
9. OKTOBER 2013 MORGENBOOSTER
INDHOLDSSTRATEGI
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
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 9. OKTOBER 2013
MORGENBOOSTER
VI ØNSKER ALLE ENKELTHED
MEN VI BLIVER FRISTET AF
KOMPLEKSITET
9. OKTOBER 2013
THANKS TO GILES COLBORNE
HVAD ER ENKELT?
MORGENBOOSTER 9. OKTOBER 2013
DET GYLDNE SNIT
MORGENBOOSTER 9. OKTOBER 2013
HVORDAN DET ER BYGGET
MORGENBOOSTER 9. OKTOBER 2013
HVORDAN DET SER UD
MORGENBOOSTER 9. OKTOBER 2013
HVORDAN DET FØLES AT BRUGE DET
MORGENBOOSTER 9. OKTOBER 2013
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
9. OKTOBER 2013 MORGENBOOSTER
MOBILE FIRST DESIGN.
9. OKTOBER 2013 MORGENBOOSTER
I'M JUST GOING TO COME OUT AND SAY WHAT SOME OF US HAVE BEEN THINKING ABOUT RESPONSIVE DESIGN. IT BREEDS BORING.
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
Mark Boulton, on responsive workflow
DESIGN I BROWSEREN IKKE PÅ LÆRRED
9. OKTOBER 2013 MORGENBOOSTER
• 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
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
MOBILE FIRST WIREFRAMES
9. OKTOBER 2013 MORGENBOOSTER
1
2
3
4
5
1
2
3
4
1
2
4
3
5
PROCESSEN – V. 0
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
PROCESSEN – V. 1.0
9. OKTOBER 2013 MORGENBOOSTER
PROCESSEN – V. 1.0
9. OKTOBER 2013 MORGENBOOSTER
PROCESSEN – V. 1.0
9. OKTOBER 2013 MORGENBOOSTER
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
SCOPE BREAKDOWN
MAX 2 DAGE?
RESCOPE
RESPONSIVE FLOW
9. OKTOBER 2013 MORGENBOOSTER
LEAN UX
9. OKTOBER 2013 MORGENBOOSTER
LEAN UX
9. OKTOBER 2013 MORGENBOOSTER
LEAN UX
9. OKTOBER 2013 MORGENBOOSTER
RESPONSIVE WEBDESIGN HAR ÆNDRET VORES TILGANG TIL NETTET PÅ TVÆRS AF SAMTLIGE FAGDICIPLINER
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
EXERGI
9. OKTOBER 2013 MORGENBOOSTER
APP, MOBILE OG DESKTOP
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
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
9. OKTOBER 2013 MORGENBOOSTER
RESPOSNIVE DESIGN IS NOT A PANACEA
RATHER A GREAT STEP IN THE RIGHT DIRECTION
9. OKTOBER 2013 MORGENBOOSTER
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?
top related