• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design
 

Responsive Web Design

on

  • 8,675 views

La ponencia que hemos dado en el ClinicSEO sobre Responsive Web Design, puedes verla comentada en http://moon.es/uhf/

La ponencia que hemos dado en el ClinicSEO sobre Responsive Web Design, puedes verla comentada en http://moon.es/uhf/

Statistics

Views

Total Views
8,675
Views on SlideShare
2,499
Embed Views
6,176

Actions

Likes
6
Downloads
65
Comments
1

14 Embeds 6,176

http://www.clinicseo.es 2491
http://moon.es 1226
http://www.microteching.com 1120
http://blogrelevanttraffic.es 812
http://www.seonthebeach.es 375
http://cabani.cat 47
http://cabanicrea.com 39
http://seobsesion.com 25
http://www.relevanttraffic.es 21
http://feeds.feedburner.com 5
http://abtasty.com 5
http://translate.googleusercontent.com 4
http://pinterest.com 4
http://www.linkedin.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Ponencia de responsive presentada en el clinic de SEO para Moviles
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design Responsive Web Design Presentation Transcript

    • Arturo Marimón | @arturomarimon RESPONSIVE WEB DESIGNBe water my friend
    • Arturo Marimón | @arturomarimonOptimizadopara …
    • Arturo Marimón | @arturomarimon 3.997 dispositivos AndroidA dia de hoy http://opensignalmaps.com/reports/fragmentation.php
    • Arturo Marimón | @arturomarimonRWD: Logical
    • Arturo Marimón | @arturomarimonhttp://moon.es
    • Arturo Marimón | @arturomarimonhttp://moon.es
    • Arturo Marimón | @arturomarimonhttp://moon.es
    • Arturo Marimón | @arturomarimonhttp://moon.es
    • Arturo Marimón | @arturomarimon Queventajastiene RWD • Una única URL. • Un único contenido. • 1 millón de dispositivos. Un solo código.Welcome back totheweb
    • Arturo Marimón | @arturomarimonGoogle y el RWD
    • Arturo Marimón | @arturomarimon• Diciembre 2011Google publica el lanzamiento de sus botsmobile http://googlewebmastercentral.blogspot.com.es/2011/12/intro ducing-smartphone-googlebot-mobile.html• Mayo 2012Google recomienda el RWD http://googlewebmastercentral.blogspot.com.es/2012/04/responsive- design-harnessing-power-of.html• Antes de Diciembre 2012¿Qué creéis que pasará?
    • Arturo Marimón | @arturomarimon 2009 - $141 millones 2010 - $750 millones 2011 - $4.000 milloneshttp://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/
    • Arturo Marimón | @arturomarimonMade in Spain http://www.starbucks.com/static/reference/styleguide/
    • Arturo Marimón | @arturomarimonMade in Spain
    • Arturo Marimón | @arturomarimon Responsive Web Designno es mobilefriendlyes default
    • Arturo Marimón | @arturomarimon Mobile firsthttp://www.html5rocks.com/en/mobile/responsivedesign/
    • Arturo Marimón | @arturomarimon Content first +Design Mobile first + CSS Mobile first
    • Arturo Marimón | @arturomarimon¿Que ha cambiadorealmente?
    • Arturo Marimón | @arturomarimonMismojuego / más variables
    • Arturo Marimón | @arturomarimonEstoya no son 20 píxeles
    • Arturo Marimón | @arturomarimon•Ancho de divs•Tipografía•Ancho de lasimágenes• Media QueriesTodoesproporcional
    • Arturo Marimón | @arturomarimon<div>proporcionalesLa estructurafluidade todala vida. 22.9% 70.83% 680px / 960px = 70.83%
    • Arturo Marimón | @arturomarimon Tipografía: Hazlofácilhttp://informationarchitects.net/blog/responsive-typography-the-basics/
    • Arturo Marimón | @arturomarimonpx, em o rem
    • Arturo Marimón | @arturomarimonemel ancho de la Mh1 { font-size: 1.75em; /* 28px/16px */}p { font-size: .875em; /* 14px/16px */}pspan { font-size: 1.2857em; /* 18px/14px */ }Contexto del elemento es complicado
    • Arturo Marimón | @arturomarimonPERO ¿ HAYALGUIENMAS?
    • Arturo Marimón | @arturomarimon62.5% +
    • Arturo Marimón | @arturomarimonrem Firefox 3.6 +, Chrome, Safari 5, y IE9html { font-size: 62.5%/* Base 10 */ }body {font-size:16px; font-size:1.6rem;/* 16px/10px */}p {font-size:14px; font-size: 1.4rem;/* 14px/10px */}pspan { font-size:18px; font-size: 1.8rem;/* 18px/10px */ }
    • Arturo Marimón | @arturomarimonFluid images /* adaptables al dispositivo */ img{max-width:100%;} Las imágenes tienen 2 problemas http://bit.ly/responsive-img
    • Arturo Marimón | @arturomarimonMediaQueries
    • Arturo Marimón | @arturomarimonCSS3 Media queries <link rel="stylesheet" ...media="screen and (max-width:480px)" href="..."> @media screen and (max-width:480px) { // insert CSS rules here } http://www.w3.org/TR/css3-mediaqueries/
    • Arturo Marimón | @arturomarimon Media queries + Mobile firstCSS Básico Mobile …@media screen and (min-width:480px) { …. }@media screen and (min-width:768px) { …. }@media screen and (min-width:960px) { …. }@media screen and (min-width:1140px) { ….}
    • Arturo Marimón | @arturomarimonBreakpoints mágicos
    • Arturo Marimón | @arturomarimonhttp://www.slideshare.net/yiibu/pragmatic-responsive-design
    • Arturo Marimón | @arturomarimon
    • Arturo Marimón | @arturomarimon Breakpoints• El contenido marca el breakpoint no el dispositivo• El breakpointno debería ser en pxsino en em
    • Arturo Marimón | @arturomarimonFrameworksFoundation 3 Goldengridsystem http://foundation.zurb.com/ http://goldengridsystem.com/CSSgrid Less Framework http://cssgrid.net/ http://lessframework.com/ GRIDPAK http://gridpak.com/
    • Arturo Marimón | @arturomarimonEL WPO es clave
    • Arturo Marimón | @arturomarimonPerformanceAplica las mismas normas que la web yalgunas nuevas como:• Tamaño imágenes según dispositivo• Reduce el número de elementos DOM• Dividir cssmobile/desktop no ayuda
    • Arturo Marimón | @arturomarimonPerformance tools Ahora para móvil Blaze.io/mobile/
    • Arturo Marimón | @arturomarimonThe man from the moon ARTURO MARIMÓN http://moon.es http://bit.ly/clinic-rwd