Loading presentation...

Present Remotely

Send the link below via email or IM


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.


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

W3C @ WWW2012

17 April 2012, Lyon, France

Frances de Waal

on 22 August 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of W3C @ WWW2012

Mobile Web
inline styles
design attributes
empty elements breaks
spacers for names of elements and attributes Forbidden for target_blank or pop-ups Of course you will not use tables for layout! XHTML 1.0
XHTML Basic 1.1
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 IMAGES HTML5 XHTML HTML lowercase 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 new avoid
unnecessary elements <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> or other nightmare stuff! You shall not use for layout Good Habits HTML CSS CONTENT SCREEN ADAPTIVE CONTENT viewport media-queries ADAPTIVE
DESIGN interaction images layout navigation Desktop Keyboard
Mouse Mobile finger Logical order of the elements not too much space between elements needs space between elements a:hover, a:active, a:focus 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?
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 for mobile 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 ! Distance between elements is no problem cursor ! minimal size of elements ! not replace the user reversible adaptive layout 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 nó
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
to change version
by hand for
search engines
and others ideal is www.domain.com
m.domain.com www.domainname.com for both
mobile and desktop version :( :) now you
may need redirection :( precise
device detection based on
database Content
Adaption page contains content 1
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



adaptive design) HOW?! in the head and make sure
it is AVOID speed server-side configuration cache-control Expires
headers ETags gZip server
caching with
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 header Mobile Layout screens small just 1 col! 2 cols or more Enhanced Layout float

position keep it simple FIRST height ! don't just show the header,
make sure to show some content as well layout linear NO
horizontal scrolling Progressive Enhancement first the basics > mobile next enhance > desktop 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 use 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 <link rel="stylesheet" href="basic.css" /> @media all and (min-width: 600px) {

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" />
linear layout

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


scaling=1.0" /> needless take care of IE but ?@#%^&!... later more! battery power http://www.w3devcampus.com Test the different viewport settings on your mobile with the viewportmeter from Jaap Swart at
http://jaswa.nl/m/me/ Robin Berjon
http://berjon.com/ Frances de Waal
http://www.waalweb.nl http://www.w3.org/TR/css3-mediaqueries/ Let's share experiences! http://lyon.waalweb.nl/ @media all (orientation: landscape) {
body {
background-color: #2EF600;
} use external stylesheet 1 to preferrably one :)
Full transcript