Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Design

Introduction about Responsive Design. Basic Architecture.
by

Arun De Joe

on 4 October 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Design

An Introduction to Responsive Design Screen Size Interaction Performance Resource Considerations WHAT PRINCIPLES PROCESS Set of
Principles
Process
Tools
to translate web design across different canvas. TOOLS Design Considerations
Screen Size
Performance
Resource
Interaction Making Portable Markups Mobile-First
Desktop-First
Feature Detection
Device Detection Media-Queries
Break-Up js
Pictures polyfill
imgReplace
BrightCove
Respond.js
Modernizer.js CHALLENGES CSS Override
Support for Native Layout Techniques Touch Events Hover Events Swipe
Snap
Swipe and Drag
Inertial Scrolling polyfills
iScroll v4
hammer js Absent
States
Hover for more Hardware Processor
RAM
Hardware Accleration
Animation HTML Page Less HTML Elements
Low-Res Images
Javascript Lib Connectivity Download Speed
Bandwidth Cost
Un-reliable Conection Download only required.
Don't download and hide Exploit Location Approach Tools Mobile First Device Detection Desktop First Feature Detection When Business Logic
Bright Cove Player Why? Existing Sites
Desktop users high
Got Apps How? CSS - Desktop
Overriding of CSS Modernizer Most CSS Features
Touch Detection
Other Tests
Customizable Why? Stripped Down
Start with core
Adding Features
Easy to Extend Why Gazzilion Devices
Devices - Functionality Mapping
Future Proof
Forward Compatible Penalize Desktop
Optimize - Mobile Performance
Calculation in Mobile - Less How? Media Queries Flexible Grids Match Media Flexible Images When Business Logic
Bright Cove Player The Jack window.matchmedia("(min-width:400px)").matches Picture Element UGC
Picturefill
Load Appropriate Images
Performance The King If-Else for css
min, max operators
properties
Multiple Checks DG - imgReplace jQuery Plugin
Switch Directory
Drupal Image Cache <div data-picture data-alt="A giant stone face">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
</div> https://github.com/scottjehl/picturefill img {
max-width:100%;
height:auto
} caveats:
browser compatibility;
download/display size Best Practice Timkadlec.com
@media screen and (max-device-width: 480px){
background-color:#fff;
}

<link rel="stylesheet" href="paper.css" media="print" /> @media screen and (max-device-width: 480px){/*from 0-480px;*/}
@media screen and (min-device-width: 480px){/*from 480px to infinity;*/} width
height
device-width
device-height
device-pixel-ratio
orientation @media screen and (min-device-width: 480px) and (max-device-width:728px; ) {} Trigger Events
Breakpoints customizable
Out Of Box
On Size Load Events BreakUp JS window.matchmedia("(orientation:portrait)").addListener(handleOrientationChange);
Full transcript