SlideShare a Scribd company logo
1 of 40
Mobile	
  Web
COSCUP	
  2013
Mike	
  Lee
Co-­‐founder	
  /	
  CTO	
  /	
  DevOps	
  @Pinkoi
80000+ Designed Products
Our vision is to build the biggest online
community and marketplace for designers in Asia.
•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
h"p://gadgetgyan.in/wp-­‐content/uploads/2013/04/smartphone.jpg
Mobiles
Mobile	
  Web
Mobile	
  Web	
  (cont.)
Mobiles	
  are	
  not	
  laptops
Mobile	
  has	
  limitaUon
#	
  less	
  CPU
#	
  less	
  Memory
#	
  slow	
  Network
#	
  smaller	
  screen
If	
  a	
  mobile	
  web	
  is	
  not	
  useful,	
  
it	
  results	
  in	
  a	
  negaUve	
  percepUon	
  
about	
  the	
  brand
Mobile	
  Web	
  (cont.)
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
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	
  */
}
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
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;
HTML5	
  Input	
  Types
email,	
  url,	
  search,	
  date,	
  number,	
  tel	
  ...
h"p://html5doctor.com/html5-­‐forms-­‐input-­‐types/
<input	
  type="search">
LBS,	
  HTML5	
  GeolocaUon
navigator.geolocaDon
	
  	
  	
  	
  .getCurrentPosiDon(funcDon(posiDon)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  doSth(posiDon.coords.laDtude,
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  posiDon.coords.longitude);	
  
	
  	
  	
  	
  	
  },	
  error)
Caching
navigator.geolocaDon
	
  	
  	
  	
  .getCurrentPosiDon(success,	
  error,	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  {maximumAge:	
  60000})
HTML	
  Media	
  Capture
<input	
  type="file"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  accept="image/*"
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  capture="camera">
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
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/
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
40%	
  abandon	
  sites	
  with	
  page	
  load	
  >	
  3s
Performance	
  mahers
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
Request
Reduce	
  DNS	
  lookups
#	
  200ms	
  per	
  DNS	
  lookup
Reduce	
  HTTP	
  requests
#	
  80ms	
  per	
  HTTP	
  request
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
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
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.)
JavaScript
JavaScripts	
  at	
  the	
  bohom
Use	
  HTML5	
  new	
  ahributes	
  
Load	
  asynchronously
Non-­‐blocking
<script	
  src=””	
  async	
  defer></script>
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
CSS
Stylesheets	
  at	
  the	
  top
#	
  avoid	
  FOUC	
  (Flash	
  Of	
  Unstyled	
  Content)
#	
  avoid	
  reflow
.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
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	
  
HTML5
Not	
  fully	
  supported
Polyfills	
  are	
  too	
  heavy
Progressive	
  enhancement
Feature	
  DetecUon
Modernizr
modernizr.com
if	
  (Modernizr.localstorage)	
  {
	
  	
  	
  	
  //	
  localstorage	
  works!
}
Infinite	
  Scrolling	
  Pahern
Large	
  data	
  sets
Only	
  download	
  subset
Less	
  bytes
Lazy	
  Load	
  Pahern
CondiUonal	
  download
Less	
  resources	
  loaded,	
  fast
Less	
  bytes
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!?
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
RWD	
  (cont.)
For	
  mobile	
  performance,	
  
the	
  best	
  is	
  not	
  always	
  RWD
Don’t	
  use	
  it	
  just	
  because	
  it’s	
  cool	
  
AWD	
  (AdapUve	
  Web	
  Design)
The	
  server	
  idenUfies	
  the	
  device	
  and	
  
sends	
  a	
  different	
  code,	
  including	
  
content,	
  presentaUon	
  and	
  behavior
AWD	
  (cont.)
Predefined	
  set	
  of	
  layout	
  sizes
Redirects	
  
Different	
  URLs	
  (sub-­‐domains)
Too	
  many	
  devices
Too	
  many	
  code	
  bases
SEO	
  issue
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)
Thank you!
http://pinkoi.com/product/1BE15FrN
Thank you!
Email	
  /	
  FB
mike.lee@pinkoi.com

More Related Content

What's hot

State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerWalter Ebert
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebMorgan Cheng
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For SpeedAndy Davies
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile ContextAndy Davies
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why howbrucelawson
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013Andy Davies
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016Chris Love
 
Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Carin Campanario
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to knowChris Love
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web DeveloperChris Love
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furiousAnna Migas
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 

What's hot (20)

State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile Web
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile Context
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
 
Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications?
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 

Viewers also liked

Git tutorial for windows user (給 Windows user 的 Git 教學)
Git tutorial for windows user (給 Windows user 的 Git 教學)Git tutorial for windows user (給 Windows user 的 Git 教學)
Git tutorial for windows user (給 Windows user 的 Git 教學)Cloud Tu
 
Join Pinkoi!
Join Pinkoi!Join Pinkoi!
Join Pinkoi!HR Pinkoi
 
When Web meet Native App
When Web meet Native AppWhen Web meet Native App
When Web meet Native AppYu-Wei Chuang
 
REST to RESTful Web Service
REST to RESTful Web ServiceREST to RESTful Web Service
REST to RESTful Web Service家弘 周
 
ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事悠識學院
 
Buffer's Top 10 Learnings Growing to $10 Million ARR
Buffer's Top 10 Learnings Growing to $10 Million ARRBuffer's Top 10 Learnings Growing to $10 Million ARR
Buffer's Top 10 Learnings Growing to $10 Million ARRBuffer
 

Viewers also liked (7)

Git tutorial for windows user (給 Windows user 的 Git 教學)
Git tutorial for windows user (給 Windows user 的 Git 教學)Git tutorial for windows user (給 Windows user 的 Git 教學)
Git tutorial for windows user (給 Windows user 的 Git 教學)
 
Join Pinkoi!
Join Pinkoi!Join Pinkoi!
Join Pinkoi!
 
When Web meet Native App
When Web meet Native AppWhen Web meet Native App
When Web meet Native App
 
REST to RESTful Web Service
REST to RESTful Web ServiceREST to RESTful Web Service
REST to RESTful Web Service
 
ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事
 
Buffer's Top 10 Learnings Growing to $10 Million ARR
Buffer's Top 10 Learnings Growing to $10 Million ARRBuffer's Top 10 Learnings Growing to $10 Million ARR
Buffer's Top 10 Learnings Growing to $10 Million ARR
 
Front series A deck
Front series A deckFront series A deck
Front series A deck
 

Similar to Pinkoi Mobile Web

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in BriefEPAM
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.agup2009
 
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Esri Nederland
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWDChristopher Schmitt
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web DevelopmentJonathan Snook
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인Daum DNA
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 

Similar to Pinkoi Mobile Web (20)

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.
 
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 

Recently uploaded

Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfROWELL MARQUINA
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MIRomil Mishra
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 

Recently uploaded (20)

Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MI
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 

Pinkoi Mobile Web

  • 1. Mobile  Web COSCUP  2013 Mike  Lee Co-­‐founder  /  CTO  /  DevOps  @Pinkoi
  • 3. Our vision is to build the biggest online community and marketplace for designers in Asia.
  • 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
  • 7. Mobile  Web  (cont.) Mobiles  are  not  laptops Mobile  has  limitaUon #  less  CPU #  less  Memory #  slow  Network #  smaller  screen
  • 8. If  a  mobile  web  is  not  useful,   it  results  in  a  negaUve  percepUon   about  the  brand Mobile  Web  (cont.)
  • 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. 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. 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. 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. HTML5  Input  Types email,  url,  search,  date,  number,  tel  ... h"p://html5doctor.com/html5-­‐forms-­‐input-­‐types/ <input  type="search">
  • 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. HTML  Media  Capture <input  type="file"                            accept="image/*"                          capture="camera">
  • 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. 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. 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. 40%  abandon  sites  with  page  load  >  3s Performance  mahers
  • 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. Request Reduce  DNS  lookups #  200ms  per  DNS  lookup Reduce  HTTP  requests #  80ms  per  HTTP  request
  • 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. 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. 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. JavaScript JavaScripts  at  the  bohom Use  HTML5  new  ahributes   Load  asynchronously Non-­‐blocking <script  src=””  async  defer></script>
  • 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. CSS Stylesheets  at  the  top #  avoid  FOUC  (Flash  Of  Unstyled  Content) #  avoid  reflow
  • 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. 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. HTML5 Not  fully  supported Polyfills  are  too  heavy Progressive  enhancement Feature  DetecUon Modernizr modernizr.com if  (Modernizr.localstorage)  {        //  localstorage  works! }
  • 31. Infinite  Scrolling  Pahern Large  data  sets Only  download  subset Less  bytes
  • 32. Lazy  Load  Pahern CondiUonal  download Less  resources  loaded,  fast Less  bytes
  • 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. 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. RWD  (cont.) For  mobile  performance,   the  best  is  not  always  RWD Don’t  use  it  just  because  it’s  cool  
  • 36. AWD  (AdapUve  Web  Design) The  server  idenUfies  the  device  and   sends  a  different  code,  including   content,  presentaUon  and  behavior
  • 37. AWD  (cont.) Predefined  set  of  layout  sizes Redirects   Different  URLs  (sub-­‐domains) Too  many  devices Too  many  code  bases SEO  issue
  • 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)
  • 40. Thank you! Email  /  FB mike.lee@pinkoi.com