Pinkoi Mobile Web

13,714 views

Published on

Pinkoi Mobile Web at COSCUP 2013

Published in: Technology, Design

Pinkoi Mobile Web

  1. 1. Mobile  Web COSCUP  2013 Mike  Lee Co-­‐founder  /  CTO  /  DevOps  @Pinkoi
  2. 2. 80000+ Designed Products
  3. 3. Our vision is to build the biggest online community and marketplace for designers in Asia.
  4. 4. •25%  visitors  from  outside  of  Taiwan  -­‐   Hong  Kong,  North  America,  China,  Japan,   Singapore,  Malaysia •Help  designers  grow  business  to  7   countries  worldwide What We’ve Accomplished Internationally
  5. 5. h"p://gadgetgyan.in/wp-­‐content/uploads/2013/04/smartphone.jpg Mobiles
  6. 6. Mobile  Web
  7. 7. Mobile  Web  (cont.) Mobiles  are  not  laptops Mobile  has  limitaUon #  less  CPU #  less  Memory #  slow  Network #  smaller  screen
  8. 8. If  a  mobile  web  is  not  useful,   it  results  in  a  negaUve  percepUon   about  the  brand Mobile  Web  (cont.)
  9. 9. Unfixed  Page  Width Configure  the  viewport <meta  name="viewport"  content="  width=device-­‐width,                                                                                                                                      iniDal-­‐scale=1,                                                                                                                                        maximum-­‐scale=1,                                                                                                                                      user-­‐scalable=no"> h"p://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplicaDons/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  10. 10. Separate  styles  by  target  viewport  size @media  only  screen              and  (min-­‐width:  320px)            and  (max-­‐with:  480px)    {            /*  styles  */ } Unfixed  Page  Width  (cont.) @media  queries Separate  styles  by  target  screen  size @media  only  screen              and  (min-­‐device-­‐width:  320px)            and  (max-­‐device-­‐with:  480px)    {            /*  styles  */ }
  11. 11. for  JavaScript var  mq  =  window.matchMedia(‘(min-­‐width:  321px)’); if  (mq.matches)  {        //  window  width  is  at  least  321px   }  else  {          //  window  width  is  less  than  321px   } Unfixed  Page  Width  (cont.) @media  queries
  12. 12. High  DPI  (like  ReUna) 1  CSS  pixel  !=  1  device  pixel @media  only  screen              and  (min-­‐device-­‐pixel-­‐raDo:  2)    {            /*  some  styles  for  high  resoluDon  */ } var  dppx  =  window.devicePixelRaDo;
  13. 13. HTML5  Input  Types email,  url,  search,  date,  number,  tel  ... h"p://html5doctor.com/html5-­‐forms-­‐input-­‐types/ <input  type="search">
  14. 14. LBS,  HTML5  GeolocaUon navigator.geolocaDon        .getCurrentPosiDon(funcDon(posiDon)  {                  doSth(posiDon.coords.laDtude,                                        posiDon.coords.longitude);            },  error) Caching navigator.geolocaDon        .getCurrentPosiDon(success,  error,                                                                                      {maximumAge:  60000})
  15. 15. HTML  Media  Capture <input  type="file"                            accept="image/*"                          capture="camera">
  16. 16. Images Embrace  embedded  content Inline  using  Data  URIs li  {        background-­‐image:  url("data:image/png;base64,iVBORw0KGgoA.....”); } Use  CSS  to  render  simple  images CSS  Sprite
  17. 17. background-­‐image:  -­‐webkit-­‐image-­‐set(  url(image.png)  1x,                                                                                                                                                url(image@2x.png)  2x); The  future srcset <img src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> responsive  images <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg"> </picture> Images  (cont.) High  devices  resoluUons h"p://mobile.smashingmagazine.com/2010/11/17/designing-­‐for-­‐iphone-­‐4-­‐reDna-­‐display-­‐techniques-­‐and-­‐workflow/
  18. 18. Gestures Click  event  delayed  between  300~500ms Fastclick Limited  touch  events #  touchstart #  touchmove #  touchend Hammer.js github.com/elabs/fastclick github.com/EightMedia/hammer.js
  19. 19. 40%  abandon  sites  with  page  load  >  3s Performance  mahers
  20. 20. Redirect  (HTTP  301,  302) From  150  to  1000ms  per  redirect 1.  www.mysite.com   2.  www.mysite.com/home 3.  m.mysite.com 4.  m.mysite.com/home keep  your  redirect  to  zero  or  minimum
  21. 21. Request Reduce  DNS  lookups #  200ms  per  DNS  lookup Reduce  HTTP  requests #  80ms  per  HTTP  request
  22. 22. Minify  &  Bundle  StaUc  Files Remove  comments,  spaces Combine  all  files  into  single  bundle #  reduce  round  trips  Umes #  Increasing  bandwidth  efficiency github.com/mishoo/UglifyJS github.com/GoalSmashers/clean-­‐css UglifyJS #  much  faster  than  Google  Closure Clean-­‐css #  much  faster  than  YUI  Compressor
  23. 23. Gzip Increasing  bandwidth  efficiency Reduce  bytes,  every  byte  counts More  consistent  data  will  compress  beher #  CSS  properUes  in  same  order #  HTML  ahributes  in  same  order #  use  consistent  casing #  use  consistent  quoUng Avoid  gzip  for  image  or  binary  files
  24. 24. Apache AddOutputFilterByType  DEFLATE  text/css  applicaDon/x-­‐javascript  ... Nginx gzip  on; gzip_types  text/css  applicaDon/x-­‐javascript  ...; If  you  do  one  thing  to  improve  performance,  do  this Gzip  (cont.)
  25. 25. JavaScript JavaScripts  at  the  bohom Use  HTML5  new  ahributes   Load  asynchronously Non-­‐blocking <script  src=””  async  defer></script>
  26. 26. JavaScript  (cont.) Don’t  send  desktop  JS  to  mobile #  jQuery  which  takes  1.5s~8s  to  be  downloaded   and  parsed  over  3G Micro  libraries  can  ensure  you  only   use  what  you  need Zepto github.com/madrobby/zepto
  27. 27. CSS Stylesheets  at  the  top #  avoid  FOUC  (Flash  Of  Unstyled  Content) #  avoid  reflow
  28. 28. .box  {        transiDon:  width  2s,  height  2s,  transform  2s; } @keyframes  move  {        from  {  margin-­‐ler:-­‐20%;  }          to  {  margin-­‐ler:100%;  }   } .box  {        animaDon:  move  4s  linear  0s  infinite  alternate; } CSS  (cont.) Use  CSS  instead  of  JS  animaUon
  29. 29. Leverage  Local  Storage 1st  Ume  request #  load  resource #  set  local  storage      localStorage.setItem(key,  value) Subsequent  requests #  load  from  local  storage      localStorage.getItem(key) #  reduce  upload  bandwidth  
  30. 30. HTML5 Not  fully  supported Polyfills  are  too  heavy Progressive  enhancement Feature  DetecUon Modernizr modernizr.com if  (Modernizr.localstorage)  {        //  localstorage  works! }
  31. 31. Infinite  Scrolling  Pahern Large  data  sets Only  download  subset Less  bytes
  32. 32. Lazy  Load  Pahern CondiUonal  download Less  resources  loaded,  fast Less  bytes
  33. 33. RWD  (Responsive  Web  Design) The  browsers  get  the  same  code  base,   and  renders  it  as  defined  for  the   device Fixed  width  is  dead,  forget  pixel  perfect!?
  34. 34. RWD  (cont.) Heavy  pages Extra  HTTP  requests Slower  load  Umes Images  are  not  fluid Not  all  devices  support  media  queries mobile  web  that  pretends  to  be  web  is  likely  to  disappoint
  35. 35. RWD  (cont.) For  mobile  performance,   the  best  is  not  always  RWD Don’t  use  it  just  because  it’s  cool  
  36. 36. AWD  (AdapUve  Web  Design) The  server  idenUfies  the  device  and   sends  a  different  code,  including   content,  presentaUon  and  behavior
  37. 37. AWD  (cont.) Predefined  set  of  layout  sizes Redirects   Different  URLs  (sub-­‐domains) Too  many  devices Too  many  code  bases SEO  issue
  38. 38. One  URL  works  across  the  browsers No  heavy  resources  loading Focus  on  user  experience Concept  Pinkoi  used Yay!! RESS  (Responsive  Web  Design   +  Server  Side  Components)
  39. 39. Thank you! http://pinkoi.com/product/1BE15FrN
  40. 40. Thank you! Email  /  FB mike.lee@pinkoi.com

×