1. What is Responsive Design?
Responsive designallowsenduserstoview webpagesatmultiple screenwidthswithoutthe restrictions
of fixed-widthviewing.Thismakessitesvisuallyandfunctionallymore accessible viamobile devices,
tabletsandsmallerbrowserswithouthamperingoptimalbrowsersizesfordesktopweb-basedviewers.
The average screensize forbase usershas beengoingupoverthe yearsbut webstandardsforaverage
screenwidthis1024x768 pixelsi
.
Responsive PatternLibrary 1
ismeantto be a comprehensive collectionof responsive interface patterns
createdby and collectedforthe community.
Description
Based on SXSW Presentation “Beyond Squishy: The Truth About Responsive Design”
Responsive webdesignhashitthe scene like abomb,andnow designerseverywhere are showingoff to
theirbossesandpeersbyresizingtheirbrowserwindows."Look!The site issquishy!"While creating
flexible layoutsisimportant,there'sawhole lotmore thatgoesintotrulyexceptionaladaptiveweb
experiences.Thissessionwillintroducethe Principlesof AdaptiveDesign:ubiquity,flexibility,
performance,enhancementandfuture-friendliness.We needgobeyondmediaqueriesinorderto
preserve the web'subiquityandmove itina future-friendlydirection.
Speaker:Brad Frost
Full Slides:http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-
17070713
1 http://bradfrostweb.com/blog/web/this-is-responsive/

2. (Quote byJeff Croft)

4. (Responsive WebBookbyJeremyKeith)

5. PrinciplesofAdaptive Design (vs.Responsive):
1. Ubiquity
2. Flexibility
3. Performance
4. Enhancement
5. Future Friendly

6. (Quote byStephanie Rieger)

15. “ContentParityTrumpsall?”brad asks.Theninquiresfurther,“Butwhataboutmobile context?”And
whatis mobile context?Yes,onthe goisstill true butit isnot the onlytime people use mobile.
(76% of usersaccessmobile whilewaitinginline reference oncompete.com)

16. (86% of usersaccessmobile deviceswhile watchingtvreferenceoncompete.com)

17. (80% of usersaccessmobile duringgeneral downtime reference oncompete.com)
I find it interestingthatthese percentagesdo not add up to 100%.

18. (69% access mobile inretail storesreference oncompete.com)

19. (39% while #poopinreferenceoncompete website)

20. (The hay stack)

22. (Semi-responsive Example)
(Article the Daoof Responsive Web)

23. (Website sizes)

24. (Responsive demobyBradFrost)

25. (71% of mobile usersexpectingmobile sitestoloadasfast if not fasterthandesktopsitesby
compuware.com)

26. (74% of mobile visitorswhowillabandonasite if ittakeslongerthan5 secondstoloadby gomez.com)
The average site page size is1.3MB according to (http://httparchive.org)butcouldbe smaller.

27. (86% of responsivewebsitewhose smallscreenview weighsasmuchas the large screenview (and
shouldnot) byguypo.com)
An Example of asite withissues:

29. (A Quote from

30. ChristianHeilmann fromthe HTML5 DevConference)

32. (Performance asDesignbyBradFrost)
(Mobile webPerformance

33. testingtool)

34. (Mobile First

35. Responsive WebDesign)

36. (JeremyKeithatthe SmashingConference "The Spiritof the Web")

38. (EvenObama
Couldn'tUse His ownsite -- Stephanie Riegeronproblemswiththe white house responsivedesign)

40. (Quote
by ChristianHeilmann)

41. Noteverythingneedstobe the nextfacebook,butitdoesneedtoshow up andquickly.Don’thave
waitinguponwaitingbars.If itdoesn’tneedtobe fancy,justmake it work…faster.

42. (Improve performance -- Twitter)

49. (Future Friendly)

59. (John
ClarkGlobal Moxie Quote)

61.  (http://bit.ly/mobilefirstrwd – Demo)
 (http://bit.ly/rwdtutorial - tutorial)
 (http://bit.ly/rwdanatomy - walkthrough)
GET TO THE MEAT:

62. (DesignInteractive RetinaRevolution -
http://blog.netvlies.nl/design-interactive/retina-revolution)

64. NOT:

66. (PEW
INTERNET.orgReportson 79% of people usingsmartphonesinstores)

70. Good Examples:

71. BAD CAROUSEL:

72. Great that youcan see that it isa carousel because of
the overlayingproductbutneedsanarrow or somethingfornon-touchscreens

73. (Helpingimprovethe mobile web -- facebook)

74. (A
lightersocial share - http://filamentgroup.com/lab/socialcount/)

77. (Mobile
vs local)

85. (Mobile -- http://bradfrostweb.com/blog/mobile/a-tel-tale-sign)