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
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;
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
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
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
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!
}
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)