• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive design
 

Responsive design

on

  • 4,834 views

 

Statistics

Views

Total Views
4,834
Views on SlideShare
3,816
Embed Views
1,018

Actions

Likes
8
Downloads
120
Comments
0

7 Embeds 1,018

http://niobiumlabs.com 709
http://shreelimbkar.wordpress.com 294
http://www.linkedin.com 6
http://www.schoox.com 4
https://www.linkedin.com 3
http://localhost 1
https://shreelimbkar.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Responsive design Responsive design Presentation Transcript

  • RESPONSIVE DESIGN @doxaras @niobiumlabs
  • RESPONSIVE WEB DESIGN
  • TH EN EED
  • APPLE IS EVIL
  • HTML5 APPS
  • SCREEN FRAGMENTATION http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
  • JSFIDDLE DEMO http://jsfiddle.net/doxaras/nCGUu/
  • GOOGLE’S APPROACHhttp://androidandme.com/2012/02/applications/goodbye-old-browser-chrome-to-become-the-standard-browser-on-android-4-0-and-above/
  • BROWSER GRADING “Any device that doesn’t support media queries will receive the basic C- grade experience
  • AN OLD STORY REVIVINGhttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
  • LETS GET THING FROM THE BEGINNING
  • fluid elastic fixed
  • VIEWPORTS<meta name=”viewport” content=”width:device-width”> always use it for mobile and fluid designs
  • MEDIA QUERIES CSS 2.1<link rel="stylesheet" type="text/css" href="core.css"media="screen" /><link rel="stylesheet" type="text/css" href="print.css"media="print" /> CSS3<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
  • WAIT THERE IS MORE!!<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and(resolution: 163dpi)" href="shetland.css" />@media screen and (max-device-width: 480px) { .column { float: none; }} @import url("shetland.css") screen and (max-device-width: 480px);
  • AND MORE@media only screen and (min-device-width : 320px) (max-device-width : 569px) {...}
  • AND MORE@media only screen and (min-width : 480px) { .box{ width:200px; height:200px;background:yellow; } }@media only screen and (max-width : 320px) { .box{width:200px; height:200px; background:red; } }
  • DEVICE-WIDTH Question:Is max/min-width the same as max/min-device-width? Answer:If you set width=device-width, then max/min-width is the sameas max/min-device-width in portrait mode, and different whenin landscape mode. In short, the difference is max/min-widthwill update when you rotate the screen, whereas, max/min-device-width wont.
  • DEVICE-PIXELdevice-pixel-ratio could help you know the resolution of the devicescreen, iPhone 4 and certain other smartphones have pixel ration equalor higher than 1.5, so if you want to target high resolution devices, youcan use the media query below:@media only screenand (-webkit-min-device-pixel-ratio : 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio : 1.5) { .imagebox {background:(url:"images/high/demo.jpg");}} image will be downloaded even if the page doesnt fit the rule above!!
  • ORIENTATIONiPad introduced orientation to help with detecting orientation change, belowis how you can specify landscape and portrait style/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */}
  • IT OT I G KO
  • US ET HE FO RC E
  • JSFIDDLE DEMO http://jsfiddle.net/doxaras/LeB47/
  • TYPOGRAPHY
  • 62.5% RULE (EM2PX)• modern browsers have a 16px font default size*•body{font-size:62.5%}• 16x62.5=10px•p{font-size:1.3em;} add html{font-size:16px; } just to be sure
  • IMAGES
  • SIZING.figure { float: right; margin-bottom: 0.5em; margin-left: 2.53164557%; /* 12px / 474px */ width: 48.7341772%; /* 231px / 474px */} img { max-width: 100%; }http://www.alistapart.com/articles/fluid-images/
  • SIZINGimg { max-width: 100%; }<img src="smallRes.jpg"data-fullsrc="largeRes.jpg">
  • JSFIDDLE DEMO http://jsfiddle.net/doxaras/T66wQ/
  • DESIGN PATTERNS
  • COLUMN MERGING
  • DEALING WITH TABLEShttp://css-tricks.com/examples/ResponsiveTables/responsive.php
  • DISPLAY:NONEhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  • IMAGEShttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  • http://css-tricks.com/convert-menu-to-dropdown/
  • JSFIDDLE DEMO http://jsfiddle.net/doxaras/CKPnJ/
  • THE TOOLS
  • WEB DEVELOPER
  • PIXEL 2 EM
  • APART.JS
  • LETTERING.JS
  • FITTEXT.JS
  • FLUID 960
  • MODERNIZR
  • RESPOND.JS• really small script < 1kb• enabling old browsers IE7 IE8• responsive is not just a mobile problem• backwords compatibility of your designs
  • LESS FRAMEWORK
  • TIPS & TRICKS
  • APPLE VIEWPORT<meta name="viewport" content="width=device-width; initial-scale=1.0">
  • SELECTORS SHOULD BE PRESENT ALSO IN THE PLAIN CSS DOCUMENTS
  • EM’S AND PX’S• local DOM scope overrides the default 62.5% rule• left and right• top and line-height should be em’s• avoid nested em definitions
  • TRANSITIONSbody { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;}
  • RETINA DISPLAY SELECTORS<link rel="stylesheet"media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css"href="../iphone4.css" />
  • HIDE NAVIGATION// When ready...window.addEventListener("load",function() { // Set a timeout... setTimeout(function(){ // Hide the address bar! window.scrollTo(0, 1); }, 0);});
  • META TAG FOR NAME<meta name="apple-mobile-web-app-capable"content="yes" />
  • KNOW THY DIMENSIONS
  • THAT’S ALL FOLKS DROP ME AN EMAIL ATYIANNIS@NIOBIUMLABS.COM