Your SlideShare is downloading. ×
0
Responsive	  Web	  Design	         Jussi	  Pohjolainen	                    	  
Smartphones	  outsell	  PCs!	  •  Depending	  on	  the	  source,	  smartphones	     outsell	  PCs	  in	  2010	  or	  2011!...
Mobile	  First!	  •  Design	  your	  layout	  so	  that	  it	  works	  on	  mobile	  •  A"er	  this,	  implement	  a	  ver...
Responsive	  Web	  Design	  (RWD)	  •  Mobile	  site	  vs	  Desktop	  site?	  Do	  we	  need	  this?	  •  Web	  design	  a...
In	  Short	  •  CSS3	  Media	  Queries	      –  Different	  CSS	  rules	  based	  on	  the	  width	  of	  the	         brow...
CSS	  •  CSS	  2.1	       –  Possibility	  to	  use	  media	  types	  like,	  screen,	  print	          and	  handheld	   ...
Media	  Features	  •    width	                      •    color	  •    height	                     •    color-­‐index	  •  ...
Mobile	  Design:	  Speed	  •  Speed!	     –  User	  use	  the	  web	  to	  get	  things	  done	     –  The	  choice	  whic...
Mobile	  Design:	  Dimensions	  
Mobile	  Design:	  Dimensions	  •  In	  mobile	  world,	  dimensions	  change	  even	     faster!	  •  Should	  we	  targe...
CSS3	  Media	  Queries:	  three	  files	  <!-- All common styles -->!!<link rel="stylesheet" href="common.css" type="text/c...
CSS3	  Media	  Queries:	  one	  file	  /* Common CSS Goes Here */!      !/* Devices between 480-1024px */!@media screen and...
CSS3	  Media	  Queries:	  	               portrait	  and	  landscape	  !<!-- Orientation styles for devices w/ max width o...
Viewport	  •  What	  part	  of	  the	  web	  page	  is	  visible	  in	  mobile	     device	      –  Panning,	  zooming	  •...
Behavior	  •  Click	  vs	  Tap	      –  Elements	  should	  be	  big	  enough	      –  Apple:	  44	  x	  44	  points	  •  ...
Exercise	  1	  •  Create	  web	  page	  that	  has	  only	  one	  Ntle.	  The	     color	  of	  the	  Ntle	  changes	  whe...
Exercise	  2	  •  Create	  responsive	  web	  page	  that	  adapts	  to	     screen	  sizes	      –  Large	  display:	  fo...
Upcoming SlideShare
Loading in...5
×

Responsive Web Site Design

333

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
333
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Web Site Design"

  1. 1. Responsive  Web  Design   Jussi  Pohjolainen    
  2. 2. Smartphones  outsell  PCs!  •  Depending  on  the  source,  smartphones   outsell  PCs  in  2010  or  2011!  •  Mobile  internet  data  traffic  increases  heavily  •  Lot  of  new  devices  •  Post-­‐PC  era  
  3. 3. Mobile  First!  •  Design  your  layout  so  that  it  works  on  mobile  •  A"er  this,  implement  a  version  that  "works"   on  desktop  
  4. 4. Responsive  Web  Design  (RWD)  •  Mobile  site  vs  Desktop  site?  Do  we  need  this?  •  Web  design  approach  to  provide  opNmal   viewing  experience  across  a  wide  range  of   devices  •  Uses   –  CSS3  Media  queries   –  Fluid  proporNon-­‐based  grids   –  Flexible  images  
  5. 5. In  Short  •  CSS3  Media  Queries   –  Different  CSS  rules  based  on  the  width  of  the   browser  •  Fluid  Grid  Concept   –  Use  relaNve  units  like  percentages  rather  than   pixels  •  Flexible  images   –  Also  use  relaNve  units  for  size  
  6. 6. CSS  •  CSS  2.1   –  Possibility  to  use  media  types  like,  screen,  print   and  handheld   –  Support  is  weak!  •  CSS  3   –  CSS3  Media  Queries,  sniff  different  opNons  in  web   browser   –  Supported!   –  hZp://www.w3.org/TR/css3-­‐mediaqueries/  
  7. 7. Media  Features  •  width   •  color  •  height   •  color-­‐index  •  device-­‐width   •  monochrome  •  device-­‐height   •  resoluNon  •  orientaNon   •  scan  •  aspect-­‐raNo   •  grid  •  device-­‐aspect-­‐raNo  
  8. 8. Mobile  Design:  Speed  •  Speed!   –  User  use  the  web  to  get  things  done   –  The  choice  which  sites  people  use,  is  influenced  by   how  quickly  tool  accomplishes  their  goals   –  Op5mize  your  site  for  speed   –  Souders:  High  Performance  Web  Sites:  Essen6al   Knowledge  for  Front-­‐End  Engineers    
  9. 9. Mobile  Design:  Dimensions  
  10. 10. Mobile  Design:  Dimensions  •  In  mobile  world,  dimensions  change  even   faster!  •  Should  we  target  the  lowest  common   resoluNon?  •  How  do  we  scale  up  for  tablets?  •  =>  Create  fluid  layout  using  CSS3  
  11. 11. CSS3  Media  Queries:  three  files  <!-- All common styles -->!!<link rel="stylesheet" href="common.css" type="text/css"media="screen" />! !<!-- Devices between 480-1024px -->!<link rel="stylesheet" href="styles_max_1024.css" type="text/css" ! media="only screen and (min-width:481px) and (max-width:1024px)" />! !<!-- Devices below 480px -->!<link rel="stylesheet" href="styles_max_480.css" type="text/css" ! media="only screen and (max-width:480px)" />!
  12. 12. CSS3  Media  Queries:  one  file  /* Common CSS Goes Here */! !/* Devices between 480-1024px */!@media screen and (min-width:481px) and (max-width:1024px) {! /* styles go here */!}! !/* Devices 480px & below */!@media screen and (max-width:480px) {! /* styles go here */!}!
  13. 13. CSS3  Media  Queries:     portrait  and  landscape  !<!-- Orientation styles for devices w/ max width of 1024px -->!<link rel="stylesheet" href="portrait.css" type="text/css" ! media="only screen and (max-device-width:1024px) and(orientation:portrait)" />! !<link rel="stylesheet" href="landscape.css" type="text/css" ! media="only screen and (max-device-width:1024px) and(orientation:landscape)" />!
  14. 14. Viewport  •  What  part  of  the  web  page  is  visible  in  mobile   device   –  Panning,  zooming  •  You  can  set  this  using  viewport   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  15. 15. Behavior  •  Click  vs  Tap   –  Elements  should  be  big  enough   –  Apple:  44  x  44  points  •  Form  interacNons:  different  keyboards  for   different  input  widgets  •  JQuery  Mobile!   –  hZp://jquerymobile.com/  
  16. 16. Exercise  1  •  Create  web  page  that  has  only  one  Ntle.  The   color  of  the  Ntle  changes  when  viewing  on   different  devices   –  Large  display   –  Medium  display   –  Small  display  
  17. 17. Exercise  2  •  Create  responsive  web  page  that  adapts  to   screen  sizes   –  Large  display:  four  columns  side  by  side   –  Medium  display:  2  x  2  grid   –  Small  display:  one  column  •  Use  HTML5  secNon,  nav,  etc  for  creaNng  the   site  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×