Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Mobile & Responsive Fundamentals

Best Practices
by

Frances de Waal

on 28 August 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mobile & Responsive Fundamentals

Mobile Web

inline styles
design attributes
<center>
empty elements breaks
&nbsp;
spacers
for names of elements and attributes
Forbidden for

target_blank
or
pop-ups
or other nightmare stuff!
Of course you will not use
tables
for layout!
XHTML 1.0
XHTML Basic 1.1
HTML5
Polyglot
semantics

Enhance things with
CSS3
en
JS
,

but make the site not depending of it...

It is
EXTRA!
LAYOUT
Keep the structure
HEAD
keep the head as


as you can
fieldset, legend, label
>
forms
add

alt

attribute


add

attributes


do not scale



use
png, jpg, gif, svg
IMAGES
HTML5
XHTML
HTML
l
o
w
e
r
c
a
s
e
Progressive Enhancement
charset
DocType
meta charset="UTF-8"
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
Gebruik voor HTML5
en voor XHTML
semantics
semantics
semantics
tables
>
tabulaire data
menu > list
adress > list
h1
h2
h3
h4
p
ul
ol
dl
dt
dd
li
simpel
pageflow
height
em, %
semantic layout elements
Follow the
Let the
content
control the
Relative values are
better
Work in HTML5?
=>
use the
avoid
unnecessary elements
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
You shall not use for layout
Best
Practices

HTML
CSS
CONTENT
SCREEN
ADAPTIVE CONTENT
viewport
media-queries
RESPONSIVE
DESIGN

interaction
images
layout
navigation
Desktop
Keyboard
Mouse
Mobile
finger
logical
order
of the elements
not too much
distance
between elements
needs

distance
between elements
a:hover, a:focus, a:active
CSS
best to use:
javascript

assist
allow it to be
Helpful
split
the navigation in
2
Top menu
: 3 links
Bottom menu
: other links
to keep the
header

small
on
mobile
1 reference (CSS) pixel
=

1 device pixel
desktop
1 reference (CSS) pixel
=
more
than 1 device pixel
high density
high density

mobiles
laptop
low res
low res
mobiles
max

320x480 px
Why?

higher
quality
zoom

possible
makes

14/16px text

readable
same
CSS

for all
ideal
mobile viewport
=
width
300-350px
viewport declaration

in combination with
but...
most mobile browsers scale to
width 980-800px
to present
websites
overide
this with the

makes content

readable
independant
of the
underlying
resolution
on
Is the image content,
informative
? =>
HTML

Is the image
illustration
? =>
CSS
Size matters: max
120px

width
is very small but
good for the smallest mobile devices
Never minimize an image with CSS
OPTIMIZE
page
weight
reduce
clean code
CSS
javascript

images
sprites

Data URI's
bandwidth
costs
files
cookies
redirects

auto-refresh
server
requests
comments
remove
whitespaces
big
minimize
keyboard
!
can have
distance
between elements
cursor
!
minimal size of elements
!

not replace
the user
reversible
responsive
design
size of the finger

=
avoid
minimize
minimize
remove
avoid
use
use
external
external
optimize
use
CSS
javascript
group
group
Mobile
Desktop
small image
+
precise info
large image
+
extended content
thematically

consistent
ONE WEB
Canonical

redirection!
<link rel="canonical" href="fullversion.php" />
add
switch
link to
main version
of the page
but how let you know what the

main page is?!
www.domainname.com for both
mobile and desktop
version
let user overide
automated
choice
mobile/desktop
what do you need?
allow the user

to
change the version

by hand
for
search engines

and others
ideal is
www.domain.com
+
m.domain.com
www.domainname.com for
all devices
version
:(
:)
now you
may need redirection
:(
precise
device detection
based on
database
Content
Adaption
page
contains
content
1

mobile

ánd
desktop
for both
with the
matching
content
presented on the
matching
device
server-side
script detects if device is
mobile or not
(yes/no)
precise
device detection
based on
database
Device Detection
light-weight
or
device description repository
(against


client-side

for

responsive design
)
HOW?!
in the
head
and make sure
it is
AVOID
speed
server-side
configuration
cache-control
Expires
headers
ETags
gZip
server
caching
with
.
htaccess
or
PHP
welcome in the world of
small
link
external javascript
check your code
with the validator
if possible
width

&
height
use an
for all CSS
1
of the header
Mobile Layout
screens
small
just
1 col
!
2 cols or more
Enhanced Layout
float

position
keep it
simple
FIRST
height
!
make sure to always show some content as well
layout
linear

NO
horizontal scrolling
Progressive Enhancement
first the linear
basic
styles
next add the
enhanced styles
Progressive Enhancement
be prepared for the
worst scenario
add any
enhancement
you like
the browser that can
handle
it will
use
it
now you can
and
NO
zoom/in/out required
Of course you also don't write javascript in the body
Place the link(s) to the script(s) as far down in the HTML as possible
create in CSS
<link rel="stylesheet" href="
basic
.css" />
@media all and (min-width: 37em) {

body {
background-color: #2EF600;

}
}
1
3
exclude IEMobile
!
alternative
use the
cascade
of the stylesheets
don't repeat
identical styles
-
update
specific definitions
the CSS of the
linear
layout is
=
the
base
for all screensizes
the most enhanced
layout
uses
all

styles

from the cascade
all browsers
load all
stylesheets
but...
they only
download
the linked
resources

that are
used
the background image from the desktop stylesheet will
not be loaded
on mobile
&
<!--[if
lt IE 9

& !IEMobile
]>
<link rel="stylesheet" href="enhanced.css" />
<![endif]-->

linear layout

base for all next layouts
basic stylesheet

<link rel="stylesheet" href="
enhanced
.css" media="all and (min-width: 37em)" />
2
use the cascade
!
avoid server requests
!
!
stylus
with HTML
<meta name="viewport"

content="width=device-width,

scaling=1.0" />
needless
take care of IE
but
?@#%^&!... later more!
battery power
Test the different viewport settings on your mobile with the
viewportmeter
from Jaap Swart at
http://jaswa.nl/m/me/
Frances de Waal
http://www.waalweb.nl
http://www.w3.org/TR/css3-mediaqueries/
Let's share experiences!
http://mw.waalweb.nl
@media all (orientation:
landscape
) {
body {
background-color: #2EF600;
}
}
use
external stylesheet
1
to
preferrably one :)
And don't forget to place
the meta tag with the charset as first element in the head, followed by the title
A tutorial lead by
and remember
the user's choice with a
cookie
There is no
Be aware not to waste bandwidth!
for the smallest screen sizes
for the wider screens
mind the
This will also serve as fallback
and more
you could consider to
Something like
use ems!
with embedded media-queries
Content
Delivery
Network
use
The strict rules:
The new rules:
<
img src=
"image-src.png"
srcset=
"image-1x.png 1x, image-2x.png 2x"
alt=
"description of image">

<
img src=
"image-src.png"
srcset=
"image-1x.png 600w, image-2x.png 800w"
alt=
"description of image">
<
img src=
"image-tablet.png"

srcset=
"image-mobile.png 600w, image-mobile.png 600w 2x,
image-tablet.png 800w, image-tablet.png 800w 2x,
image-desktop.png 1x"
alt=
"description of image">
Full transcript