2013 var året hvor Responsive web design for alvor slog i igennem på alverdens platforme. På denne Morgenbooster fortalte vi om vores kunders erfaringer med responsive designog forsøgte samtidig at give et bud på, hvor responsive design er på vej hen i 2014.
Kom videre på:
http://1508.dk/services/website
http://1508.dk/services/responsive-design
5. 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™.
23. APRIL 2014MORGENBOOSTER
6. 1508.DK – ON THE MOVE
23. APRIL 2014MORGENBOOSTER
19. ALDRIG FØR HAR SÅ MANGE MENNESKER SURFET PÅ
NETTET PÅ SÅ MANGE FORSKELLIGE ENHEDER, OG
MED SÅ MANGE FORSKELLIGE OPLØSNINGER.
23. APRIL 2014MORGENBOOSTER
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/
20. MOBILE VS. DESKTOP BROWSING
23. APRIL 2014MORGENBOOSTER
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
21. MOBILENHEDER SOM PRIMÆR INTERNETADGANGSPUNKT
23. APRIL 2014MORGENBOOSTER
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
22. 55% AF AL TID BRUGT PÅ DETAILHANDELSSTEDER FOREGÅR PÅ EN MOBIL
ENHED
23. APRIL 2014MORGENBOOSTER
Mobile
55%
Desktop
45%
Time spent
COMSCORE, OKTOBER 2013
23. 3 MÅNEDER PÅ 1508.DK
3 måneder på 1508.dk
23. APRIL 2014MORGENBOOSTER
68 FORSKELLIGE MOBILE ENHEDER
24. 3 MÅNEDER PÅ 1508.DK
3 måneder på 1508.dk
23. APRIL 2014MORGENBOOSTER
Ca.. 4500 Browserstørrelser
26. 90% AF WEB-BRUGERE, DER BÅDE HAR MOBIL- OG STATIONÆR-ADGANG,
SKIFTER MELLEM ENHEDER
23. APRIL 2014MORGENBOOSTER
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
29. 23. APRIL 2014MORGENBOOSTER
TAMMYEVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE
HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/
30. 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
23. APRIL 2014MORGENBOOSTER
34. HVOR, HVORNÅR OG HVORDAN
23. APRIL 2014MORGENBOOSTER
80% bruger mobil ved
diverse nedetid ...
76% bruger mobil mens de venter i kø
eller på en aftale ...
37. DEVICE CONTEXT VS.USER INTENT
23. APRIL 2014MORGENBOOSTER
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
38. 23. APRIL 2014MORGENBOOSTER
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...
42. RESPONSIVE DESIGN
ER IKKE LÆNGERE EN
MULIGHED, SOM VI KAN
VÆLGE AT IGNORERE
23. APRIL 2014MORGENBOOSTER
43. RESPONSIVE DESIGN 101
23. APRIL 2014MORGENBOOSTER
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
44. TOOLS OF THE TRADE
23. APRIL 2014MORGENBOOSTER
HTML 5
CSS 3
JAVASCRIPT
55. MOBILE FIRST = CONTENT FIRST
FROM SITE TO SERVICE (SITE)
23. APRIL 2014MORGENBOOSTER
http://www.flickr.com/photos/teromakotero/8705861207
56. RESPONSIVE WEB
DESIGN HANDLER IKKE
OM AT LAVE SMARTERE
BEHOLDERE, MEN OM
AT LAVE SMARTERE
INDHOLD TIL
BEHOLDERNE
INDHOLD I FOKUS
23. APRIL 2014MORGENBOOSTER
58. 23. APRIL 2014MORGENBOOSTER
The device landscape is constantly
changing. Capabilities are constantly
changing. Properly structured content is
portable to future platforms.
Stephen Hay
62. PEOPLE'S CAPACITY FOR
BULLSHIT IS RAPIDLY
DIMINISHING
23. APRIL 2014MORGENBOOSTER
BRAD FROST - For a Future-Friendly Web (Mobilism 2012)
63. CONTENT STRATEGY
23. APRIL 2014MORGENBOOSTER
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”
64. 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
23. APRIL 2014MORGENBOOSTER
65. HVOR OFTE ØNSKER DU AT DIT LIV VAR MERE KOMPLEKST?
MORGENBOOSTER 23. APRIL 2014
66. HVORNÅR BAD DU SIDST OM EN MERE KOMPLEKS BRUGERGRÆNSEFLADE?
MORGENBOOSTER 23. APRIL 2014
74. 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
75. CONTENT AND FORM
ARE LOVERS,
THEIR LOVE-CHILD IS
DESIGN
23. APRIL 2014MORGENBOOSTER
77. I'M JUST GOING TO COME OUT AND SAY WHAT SOME
OF US HAVE BEEN THINKING ABOUT RESPONSIVE
DESIGN.
IT BREEDS BORING.
23. APRIL 2014MORGENBOOSTER
Jonathan Longnecker
http://www.netmagazine.com/opinions/responsive-web-design-boring
78. 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
23. APRIL 2014MORGENBOOSTER
79. DESIGN I BROWSEREN IKKE PÅ LÆRRED
22. OKTOBER 2013ARKITEKTSKOLEN AARHUS: PRÆSENTATION
• Photoshop-filen ≠ Browser-renderingen
• Flade filer er ikke interaktive
• Generelt mindre tværfaglighed
• Dyrt og endegyldigt
• Svært at forventningsafstemme
80. THE COMP IS DEAD!
23. APRIL 2014MORGENBOOSTER
“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!
81. LONG LIVE THE STYLETIL.ES
23. APRIL 2014MORGENBOOSTER
Style Tiles are a design deliverable consisting of fonts,
colors and interface elements that communicate the
essence of a visual brand for the web.
82. 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
83. “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
23. APRIL 2014MORGENBOOSTER
Mark Boulton, on responsive workflow
89. 23. APRIL 2014MORGENBOOSTER
PROCESSEN – V. 2.0
STRATEGIINDSIGT KONCEPT
DIGITAL
DESIGN
HTML
MOCKUP
SKETCH
WIREFRAME
INTERFACE
DESIGN
PROTOTYPETEST
BASERETPÅ Pon Kattera Senior Interaction Designer
LIVE
PROTOTYPE
INDHOLD
93. 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
23. APRIL 2014MORGENBOOSTER
James Young –
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
94. 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
23. APRIL 2014MORGENBOOSTER
95. RESPOSNIVE DESIGN IS
NOT A PANACEA
RATHER A GREAT STEP
IN THE RIGHT
DIRECTION
23. APRIL 2014MORGENBOOSTER
BRAD FROST