'

Adapting to Responsive Web Design

Понравилась презентация – покажи это...





Слайд 0

ADAPTING TO RESPONSIVE DESIGN @duckymatt Figaro Digital Image credit: Universal Pictures (Frankenstein, 1931)


Слайд 1

HELLO I’m Matt @duckymatt


Слайд 2

cyber-duck.co.uk @duckymatt


Слайд 3

DESIGNING 
 RESPONSIVE
 EXPERIENCES Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt


Слайд 4

SO, HOW DO WE DEFINE RESPONSIVE DESIGN? Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010) @duckymatt


Слайд 5

MEDIA QUERIES FLUID GRIDS FLEXIBLE IMAGES @duckymatt


Слайд 6

DELIVERING ELEGANT VISUAL EXPERIENCES, ACROSS JUST ABOUT ANY DEVICE. @duckymatt


Слайд 7

@duckymatt


Слайд 8

Image credit: Am Psycho Productions, Edward R Pressman Film, Lions Gate Films, Muse Productions, PPS Films, Quadra Entertainment, Universal Pictures (American Psycho, 2000) @duckymatt


Слайд 9

JOB DONE, RIGHT? Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006) @duckymatt


Слайд 10

WELL, NOT
 QUITE Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991) @duckymatt


Слайд 11

THE TRUE CHALLENGES OF RWD GO BEYOND MEDIA QUERIES AND MAKING EVERYTHING STRETCHY. @duckymatt


Слайд 12

CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt


Слайд 13

WHY DOES ALL OF THIS MATTER? @duckymatt


Слайд 14

MOBILE WEB VS DESKTOP WEB MOBILE DESKTOP INTERNET USERS 2007 - 2015 Source: http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html Source: Kleiner Perkins Caufield Byers, Mary Meeker’s Internet Trends 2011 http://www.kpcb.com/insights/2011-internet-trends @duckymatt


Слайд 15

#MOBILEGEDDON Image credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt


Слайд 16

THIS IS WHY RWD MATTERS Photo Credit: Kris Krüg: https://www.flickr.com/photos/kk/6863172432/ @duckymatt


Слайд 17

KAREN MCGRANE You don't get to decide what device somebody uses to access the Internet. They do. Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/ Source: http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ @duckymatt


Слайд 18

CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt


Слайд 19

KRISTINA HALVORSON Content strategy plans for the creation, publication, and governance of useful, usable content. Define not only which content will be published, but why we’re publishing it in the first place. Source: http://alistapart.com/article/thedisciplineofcontentstrategy @duckymatt


Слайд 20

ASSUMPTION IS THE ENEMY OF A GOOD CONTENT STRATEGY @duckymatt


Слайд 21

BUT AREN’T MOBILE USERS ALWAYS ‘ON THE GO’? Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt


Слайд 22

60% OF SMARTPHONE DATA IS USED INDOORS Image credit: Fox 2000 Pictures, Regency Enterprises, Linson Films, Atman Entertainment, Knickerbocker Films & Tarius Film (Fight Club, 1999) Source: http://www.cennydd.com/blog/designing-with-context @duckymatt


Слайд 23

39% OF PEOPLE USE THEIR MOBILE IN THE LOO. Image credit:Chuck Lorre Productions & Warner Bros. Television (The Big Bang Theory, 2007-) Source: http://www.wiyamobile.net/pitch.pdf @duckymatt


Слайд 24

Source / Credit: http://xkcd.com/773/ @duckymatt


Слайд 25

CONTENT PARITY YOUR CORE CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS @duckymatt


Слайд 26

Credit: http://wtfmobileweb.com/ @duckymatt


Слайд 27

Credit: http://wtfmobileweb.com/ @duckymatt


Слайд 28

Credit: http://wtfmobileweb.com/ @duckymatt


Слайд 29

CONTENT PARITY ≠ CONTENT PRIORITY @duckymatt


Слайд 30

@duckymatt


Слайд 31

SO HOW CAN WE
 AVOID ASSUMPTIONS? @duckymatt


Слайд 32

CHALLENGE ASSUMPTIONS WITH RESEARCH Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt


Слайд 33

WHAT PEOPLE SAY THEY DO Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt


Слайд 34

WHAT PEOPLE REALLY DO Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–) @duckymatt


Слайд 35

MOBILE FIRST
 DESIGN Check out: http://abookapart.com/products/mobile-first @duckymatt


Слайд 36

MOBILE FIRST
 DESIGN CONTENT STRATEGY @duckymatt


Слайд 37

FOCUS @duckymatt


Слайд 38

AVOID CONTENT BLOAT Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt


Слайд 39


Слайд 40

@duckymatt


Слайд 41

LAYOUTS BASED ON CONTENT NOT DEVICES Image credit: http://nexuscolorado.blogspot.com/2012/07/10-new-car-dilemas-does-it-fit-in-my.html @duckymatt


Слайд 42

@duckymatt


Слайд 43

FRAGMENTATION Source: http://opensignal.com/reports/fragmentation.php @duckymatt


Слайд 44

Image creditWalt Disney Productions (Donald Duck: Early to Bed, 1941) @duckymatt


Слайд 45

OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt


Слайд 46

CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt


Слайд 47

THE WEB TODAY… Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt


Слайд 48

2,000 KB TRANSFER SIZE 700KB 2010 Source: http://httparchive.org/trends.php 2015 @duckymatt


Слайд 49

IF WE CONTINUE AT THIS RATE THE AVERAGE PAGE SIZE IN 2020 WILL BE OVER 5MB! @duckymatt


Слайд 50

71% OF PEOPLE EXPECT WEBSITES TO LOAD AS QUICKLY (OR FASTER) ON THEIR MOBILE PHONE See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf @duckymatt


Слайд 51

EVERY SECOND COUNTS Image credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-) @duckymatt


Слайд 52

EVERY 100 MILLISECOND DELAY COSTS 1% IN SALES Source: https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website @duckymatt


Слайд 53

EVERY 1 SECOND DELAY COSTS $1.6 BILLION A YEAR Source: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales @duckymatt


Слайд 54

MAKING THE OBAMA WEBSITE 60% FASTER INCREASED DONATIONS BY 14% Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ @duckymatt


Слайд 55

3 SECOND SAVING $34 MILLION IN CONTRIBUTIONS Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ @duckymatt


Слайд 56

REDUCING LOAD BY 2 SECONDS INCREASED DOWNLOADS BY 15% Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/ @duckymatt


Слайд 57

DRIVING AN ADDITIONAL 60 MILLION DOWNLOADS PER YEAR Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/ @duckymatt


Слайд 58

THINK SPEED MATTERS? Image credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977) @duckymatt


Слайд 59

BRAD FROST It’s time for us to treat performance as an essential design feature, not just as a technical best practice Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/ Source: http://bradfrostweb.com/blog/post/performance-as-design/ @duckymatt


Слайд 60

PERFORMANCE AT THE HEART OF ALL DESIGN DECISIONS Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt


Слайд 61

SETTING A
 PERFORMANCE BUDGET Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt


Слайд 62

DAN MALL I believe designers do their best work within constraints,BUDGET TANGIBLE and knowing MAKE YOUR those constraints before starting a design can be incredibly enabling. Photo credit: Jeffrey Zeldman: https://www.flickr.com/photos/zeldman/14716769922/ Source: http://danielmall.com/articles/how-to-make-a-performance-budget/ @duckymatt


Слайд 63

PAGE LOAD SPEED HTTP REQUESTS SIZE OF THE PAGE @duckymatt


Слайд 64

PERCEPTION OF SPEED MATTERS Image credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012) @duckymatt


Слайд 65

Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt


Слайд 66

More weight SCOTT JEHL - MORE WEIGHT doesn’t mean DOESN’T MEAN MORE WAIT more wait… Source: http://www.filamentgroup.com/lab/weight-wait.html SCOTT JEHL @duckymatt


Слайд 67

MAKE THE FIRST PAGE RENDER BLAZING FAST Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt


Слайд 68

LOAD ONLY CRITICAL CONTENT THAT IS VISIBLE TO THE USER ON FIRST PAGE LOAD https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure @duckymatt


Слайд 69

@duckymatt


Слайд 70

@duckymatt


Слайд 71

CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt


Слайд 72

FUTURE FRIENDLY ≠ FUTURE PROOF WE CAN NEVER TRULY FUTURE PROOF OUR DESIGNS Check out: http://futurefriendlyweb.com/ @duckymatt


Слайд 73

THE FUTURE IS ALREADY HERE Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt


Слайд 74

Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt


Слайд 75

Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt


Слайд 76

Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt


Слайд 77

Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt


Слайд 78

Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt


Слайд 79

Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt


Слайд 80

@duckymatt


Слайд 81

Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt


Слайд 82

Source & Image Credit: http://fuckyeahinternetfridge.tumblr.com/ @duckymatt


Слайд 83

Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt


Слайд 84

A HOSTILE ENVIRONMENT Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt


Слайд 85

DIFFERENT BROWSERS Source: http://outdatedbrowser.com/ @duckymatt


Слайд 86

SLOW CONNECTIONS @duckymatt


Слайд 87

TINY TO HUGE SCREENS Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ @duckymatt


Слайд 88

RETINA AND NON RETINA Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 @duckymatt


Слайд 89

NEW INPUTS Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002) @duckymatt


Слайд 90

NEW INPUTS Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) @duckymatt


Слайд 91

Image credit: BBC @duckymatt


Слайд 92

WE DON’T GET TO DECIDE HOW PEOPLE ACCESS OUR CONTENT THEY DO. @duckymatt


Слайд 93

DO WEBSITES NEED TO LOOK EXACTLY THE SAME IN EVERY BROWSER? Image credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015) @duckymatt


Слайд 94

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ @duckymatt


Слайд 95

PROGRESSIVE ENHANCEMENT Source: http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/ Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators @duckymatt


Слайд 96

DESIGN FOR TOUCH BY DEFAULT AND ENHANCE WITH TOUCH GESTURES Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @duckymatt


Слайд 97

See: skinnyties.com @duckymatt


Слайд 98

Image credit: http://blog.teamtreehouse.com/use-input-element FORM ENHANCEMENT USING INPUT TYPES AND ATTRIBUTES @duckymatt


Слайд 99

ANIMATION AS AN ENHANCEMENT Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt


Слайд 100

@duckymatt


Слайд 101

LOCATION, LOCATION, LOCATION Check out: http://canibbq.com @duckymatt


Слайд 102

CONDITIONAL LOADING GREAT FOR ADAPTIVE EMBEDDING @duckymatt


Слайд 103

@duckymatt


Слайд 104

WE’LL NEED TO ADAPT TO THESE CHALLENGES Image credit: Paramount Pictures (Airplane!, 1980) @duckymatt


Слайд 105

RESPONSIVE DESIGN GOES MUCH FURTHER THAN MEDIA QUERIES AND FLUID GRIDS Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt


Слайд 106

3 FACTORS Image credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt


Слайд 107

CONTENT STRATEGY PERFORMANCE FUTURE FRIENDLINESS @duckymatt


Слайд 108

MAKE TRULY RESPONSIVE EXPERIENCES Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt


Слайд 109

THAT WE Image credit: Walt Disney and Pixar Studios. (Up, 2009) @duckymatt


Слайд 110

OUR CLIENTS Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt


Слайд 111

AND OUR USERS Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt


Слайд 112

WILL Image credit: Warner Bros, Village Roadshow Pictures, A&E Television Network, Bazmark Films, Red Wagon Entertainment and Spectrum Films (The Great Gatsby, 2013) @duckymatt


Слайд 113

THANK YOU @duckymatt Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm (The Artist, 2011)


Слайд 114


×

HTML:





Ссылка: