responsive & adaptive design @mlearncon15 nick floro
TRANSCRIPT
![Page 2: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/2.jpg)
fixed width design.
900 to 1,100 pixels
![Page 3: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/3.jpg)
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
![Page 4: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/4.jpg)
Internet Explorer 9BETA
Web Browser Based Delivery
Chrome Safari Firefox Opera
Edge
![Page 5: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/5.jpg)
screen size, platform and orientation
![Page 6: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/6.jpg)
desktoptabletphone
![Page 7: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/7.jpg)
desktoptabletphone phablet
![Page 8: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/8.jpg)
desktoptabletphone
Content Strategy
phone
tablet
![Page 9: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/9.jpg)
Responsive web design is that it will fluidly change and respond to fit any screen or device size.
CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation.
![Page 10: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/10.jpg)
Adaptive Web Design uses a predefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device.
The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.
![Page 11: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/11.jpg)
desktoptabletphone
Think Mobile First
Progressive Enhancement
![Page 12: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/12.jpg)
Content Strategy
![Page 13: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/13.jpg)
Performance
Browser Support
Content
Current technology or solution in place?
Time
Device
Orientation
Things to Consider
![Page 14: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/14.jpg)
Specifications
![Page 15: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/15.jpg)
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
![Page 16: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/16.jpg)
![Page 17: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/17.jpg)
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640iPhone
480 x 320
iPhone 51136-by-640
Galaxy1280 x 720
Galaxy S41920 x1080
![Page 18: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/18.jpg)
Android Xoom1280 x 720Galaxy SIII
1280 x 720
Selecting a SizePixels & Aspect Ratio
Droid960 x 540
Kindle Fire 71024 x 600
Galaxy Note 21280 x 720
![Page 19: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/19.jpg)
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 4th gen +2048 x 1536
iPad1024 x 768
![Page 20: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/20.jpg)
![Page 21: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/21.jpg)
AmazonA Quick Look
![Page 22: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/22.jpg)
![Page 23: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/23.jpg)
![Page 24: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/24.jpg)
![Page 25: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/25.jpg)
![Page 26: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/26.jpg)
Amazon Windowshop
![Page 27: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/27.jpg)
![Page 28: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/28.jpg)
![Page 29: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/29.jpg)
![Page 30: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/30.jpg)
Discover Look & Play
![Page 31: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/31.jpg)
User Interface | UI
![Page 32: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/32.jpg)
Web Design in 2015
![Page 33: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/33.jpg)
Responsive Design
DesktopTablet
Phone
![Page 41: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/41.jpg)
SamplesA Quick Look
![Page 42: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/42.jpg)
Design for Flexibility
![Page 43: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/43.jpg)
Define a Process
![Page 44: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/44.jpg)
3 Key Factors1. Audience
2. Technology
3. User Stories
![Page 45: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/45.jpg)
Mobile Factors
![Page 46: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/46.jpg)
Form Factors
![Page 47: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/47.jpg)
Bandwidth
![Page 48: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/48.jpg)
Bandwidth
![Page 49: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/49.jpg)
Input Mechanism
![Page 50: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/50.jpg)
Context
![Page 51: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/51.jpg)
Sketching where ideas begin
![Page 52: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/52.jpg)
Visual Thinking
![Page 53: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/53.jpg)
![Page 54: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/54.jpg)
Adobe IdeasEvernote Skitch
![Page 55: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/55.jpg)
Tools
![Page 56: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/56.jpg)
Chrome Developer Tools
![Page 57: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/57.jpg)
![Page 58: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/58.jpg)
![Page 60: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/60.jpg)
Testing
![Page 61: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/61.jpg)
Test on Mobile − iOS 7.x - 8.x − Android 4.x - 5.x − Windows 8 − Tablet vs Phablet vs Phone − Portrait vs Landscape
Test on Windows 8, 7, Vista, XP - Internet Explorer 9, 10, Spartan - Firefox 28 + - Chrome 35 +
Test on OS X − Safari 7, 8+ − Firefox 28 + − Chrome 335 +
Testing Code
![Page 64: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/64.jpg)
![Page 66: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/66.jpg)
![Page 67: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/67.jpg)
Experiment experiment
Adobe Edge Reflowcreative.adobe.com/products/reflow
GetBootStrap.comPlay / Test HTML Content
Chrome BrowserView / Developer/Developer Tools
CanIUse.comQuick Browser Compatibility
initializr.comSetup of Template / HTML / JS
![Page 68: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/68.jpg)
Resources To help you grow.
I never look back, it only distracts from the now ~ The Incredibles
![Page 72: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/72.jpg)
html5rocks.com
![Page 73: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/73.jpg)
![Page 74: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/74.jpg)
lynda.com
![Page 75: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/75.jpg)
CaniUse.com
![Page 76: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/76.jpg)
CaniUse.com
![Page 77: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/77.jpg)
Sencha.com
![Page 78: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/78.jpg)
POP - Prototyping on Paper | iOS App for Rapid Prototypes
![Page 79: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/79.jpg)
RESPONSIVE WEB DESIGN
by ETHAN MARCOTTE
![Page 81: Responsive & Adaptive Design @mLearnCon15 Nick Floro](https://reader034.vdocuments.mx/reader034/viewer/2022042818/55b6d06fbb61eb196c8b4906/html5/thumbnails/81.jpg)
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro