morgenbooster / responsive design 2.0 - mobile revolution / 21. august

RESPONSIVE DESIGN 2.0 – MOBILE REVOLUTION

PETER SOLOW – HEAD OF INTERFACE DEVELOPMENT

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

21 AUGUST 2013 MORGENBOOSTER - RESPONSIVE DESIGN 2.0

PROFORM TRAILRUNNER 4.0 TREADMILL

NOW WITH BUILT-IN WEB BROWSER

DET SKETE I DE DAGE…

ONE GIANT LEAP

THE INTERNET OF THINGS

GOOGLE’S GLASS

GOOGLE GLASSES

IWATCH

ALDRIG FØR HAR SÅ MANGE SURFET INTERNETTET MED SÅ MANGE FORSKELLIGE ENHEDER OG SÅ MANGE FORSKELLIGE BROWSER STØ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

UDBREDELSE AF SMARTPHONES

I nogle tilfælde erstatter ny teknologi tidligere teknologier. Fx bliver fastnettelefonen erstattet af mobiltelefoner, som igen erstattes af smartphones. Andelen af husstande med et fastnetabonnement er faldet fra 78 pct. i 2007 til 51 pct. i 2012. Samtidig er andelen med smartphones steget fra 33 til 50 pct. siden sidste år.

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk

39 FORSKELLIGE MOBIL DEVICES

SIZE MATTERS

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

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

DETTE ER IKKE BARE INTERNETTET

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)

YOU SNOOZE YOU LOOSE

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

JAVASCRIPT

SE VIDEOEN PÅ: 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

ERGONOMICS

RESPONSIVE WEBDESIGN ER MEGET MERE END TEKNIK OG DESIGN

ET ÅR EFTER VERSION 1.0

MOBILE FIRST (CONTENT FIRST) RESPONSIVE WEBDESIGN

FRA SITE TIL SERVICE (SITE)

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

INDHOLD I FOKUS

PEOPLE'S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING

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

INDHOLDS STRATEGI

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

“ESSENTIALLY WHAT IS THE MESSAGE THAT NEEDS TO BE COMMUNICATED

IF I WAS ONLY ABLE TO PROVIDE THE USER WITH UNSTYLED HTML?” — BRYAN RIEGER

MOBILE FIRST WIREFRAMES

RESPONSIVE FLOW

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

MOBILE FIRST DESIGN

- MY WEBSITES RUN FASTER DEVELOPING MOBILE FIRST. I HAVE RECODED WEBSITES RESPONSIVELY AND MOBILE FIRST AND HAVE OFTEN TIMES REDUCED MY LOAD TIME BY 30-40%

- MY CLIENTS UNDERSTAND CONTENT PRIORITY AND VISUAL HIERARCHY EASIER AND BETTER. THEY CAN ALL RELATE TO THE FRUSTRATION OF NOT GETTING THE CONTENT THEY WANT ON THEIR MOBILE BROWSERS AND I CAN EASILY USE THIS FRUSTRATION TO CONVINCE THEM TO RECONSIDER THE DESKTOP EXPERIENCE

- MY WIREFRAMING HAS GONE FASTER WITH POINT #2. SINCE THE CLIENTS NOW KNOW WHICH INFORMATION IS MORE IMPORTANT TO THEM AND THEIR USERS, I CAN TAKE THAT AND TURN IT INTO LARGER SCREEN WIREFRAME WITH THEM THAT THEY UNDERSTAND

Helen Tran http://designshack.net/articles/css/mobilefirst/

THE REASON APPLE MAKES SUCH GREAT PRODUCTS IS THAT THEY KNOW EXACTLY WHAT TO LEAVE OUT VS. WHAT TO ADD-IN. THE USER EXPERIENCE ON THE ORIGINAL IPOD: INCREDIBLY SIMPLE. THE SAME IS TRUE OF THE BEST RESPONSIVE DESIGNS.

DESIGN PRINCIPPER

THE EDL BLOG http://blog.edlconsulting.com/ecommerce/responsive-design-inglorius-hack-or-panacea/

EN RESPONSIV PROCESS

“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

LEAN UX

"IS THE PRACTICE OF BRINGING THE TRUE NATURE OF OUR WORK TO LIGHT FAST, WITH LESS EMPHASIS ON DELIVRTABLES AND GREATER FOCUS ON THE ACTUAL EXPERIENCE BEING DESIGNED."

LEAN UX

HAR SINE RØDDER I AGILE METODER OG LEAN STARTUP HVOR MAN ARBEJDER MED RAPID PROTOTYPING.

HYPOTESER OPSTILLES OG TESTES.

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

RESPONSIVE DESIGN IS NOT A PANACEA RATHER A GREAT STEP IN THE RIGHT DIRECTION

BRAD FROST

TAK @PSOLOW 1508.DK NÆSTE MORGENBOOSTER: 18. SEPTEMBER DIGITAL STRATEGI TOOLKIT

morgenbooster / responsive design 2.0 - mobile revolution / 21. august

21 august

sprgsml om

responsive

responsive

dk 3 mneder

http

web

design

Business

responsive design 2014 / morgenbooster

simple (content) / morgenbooster

adaptive content / morgenbooster

morgenbooster / trends 2013 / 24. oktober 2012

morgenbooster / microinteractions

morgenbooster #67 | sådan driver du en digital...

morgenbooster #66 | giv bedre service med målrettet...

morgenbooster #01: det gode navn

morgenbooster #74 | future financing

digital optimization / morgenbooster

jrgn clvn business preview morgenbooster

morgenbooster brand experience design

morgenbooster / are you likeable?

morgenbooster / goodbye sites. hello services. / 7. november...

effektiv digital organisation / morgenbooster / 26. marts...

morgenbooster / fra shop til service / 27. februar

what is responsive web design? the responsive web design...

jrgn clvn business / morgenbooster

morgenbooster #62 | fighting monsters

lead the responsive organization revolution: how to inspire,...