responsive & adaptive design @mlearncon15 nick floro
TRANSCRIPT
fixed width design.
900 to 1,100 pixels
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Internet Explorer 9BETA
Web Browser Based Delivery
Chrome Safari Firefox Opera
Edge
screen size, platform and orientation
desktoptabletphone
desktoptabletphone phablet
desktoptabletphone
Content Strategy
phone
tablet
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.
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.
desktoptabletphone
Think Mobile First
Progressive Enhancement
Content Strategy
Performance
Browser Support
Content
Current technology or solution in place?
Time
Device
Orientation
Things to Consider
Specifications
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
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
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
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 4th gen +2048 x 1536
iPad1024 x 768
AmazonA Quick Look
Amazon Windowshop
Discover Look & Play
User Interface | UI
Web Design in 2015
Responsive Design
DesktopTablet
Phone
SamplesA Quick Look
Design for Flexibility
Define a Process
3 Key Factors1. Audience
2. Technology
3. User Stories
Mobile Factors
Form Factors
Bandwidth
Bandwidth
Input Mechanism
Context
Sketching where ideas begin
Visual Thinking
Adobe IdeasEvernote Skitch
Tools
Chrome Developer Tools
Testing
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
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
Resources To help you grow.
I never look back, it only distracts from the now ~ The Incredibles
html5rocks.com
lynda.com
CaniUse.com
CaniUse.com
Sencha.com
POP - Prototyping on Paper | iOS App for Rapid Prototypes
RESPONSIVE WEB DESIGN
by ETHAN MARCOTTE
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro