2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

25deMayode2010

DiseoWebResponsivo(Responsive
WebDesign)
TraduccindeResponsiveWeb
Design(http://www.alistapart.com/articles/responsiveweb
design/)deAListApart(http://www.alistapart.com/)
ArtculooriginalporEthan
Marcotte(http://www.alistapart.com/authors/m/emarcotte).Traduccinal
espaolporMarceloMazza(http://marcelomazza.com.ar).
Elcontrolquelosdiseadoresconocenenelmedioimpresoydeseanfrecuentementeenel
medioweb,essimplementeunafuncindelaslimitacionesdelapginaimpresa.
Debemosaceptarelhechodequelawebnotieneesasmismaslimitaciones,ydisear
entoncesparasuflexibilidad.Peroprimero,debemos"aceptarelflujoyreflujodelas
cosas."
JohnAllsopp,"ADaoofWebDesign(http://www.alistapart.com/articles/dao/)"
ElarquitectoinglsChristopherWrenbromealgunavezdiciendoquesuprofesin
"apuntabaalaEternidad",yhayalgoatractivoenesafrmula:adiferenciadelaweb,
quesiemprepareceestarapuntandoalcortoplazo,laarquitecturaesunadisciplina
definidaporsupermanencia.Loscimientosdeunedificiodefinensuplano,quedefine
suestructura,quedaformaalafachada.Cadafasedelprocesoarquitectnicoesms
inmutable,msinvariablequelaanterior.Lasdecisionescreativasmodelan,
literalmente,unespaciofsico,definiendolaformaenquelagentesemoveratravs
delmismopordcadasoinclusosiglos.
Trabajarenlaweb,sinembargo,esunacuestincompletamentediferente.Nuestro
trabajoestdefinidoporsutransitoriedad,yesamenudorefinadooreemplazadoenel
lapsodeunoodosaos.Lasventanasdeanchoinconsistente,lasresolucionesde
pantalla,laspreferenciasdelosusuariosylasfuentesinstaladassonsloalgunosdelos
intangiblesconlosquenegociamoscuandopublicamosnuestrotrabajo,y,atravsde
losaos,noshemosvueltomuyhbilesparaello.
Peroelpanoramaestcambiando,quizsmsrpidamentedeloquenosgustara.Se
esperaquelanavegacinmobilesuperealanavegacindesdeunacomputadorade
escritorioentretres(http://www.mediapost.com/publications/?
fa=Articles.showArticle&art_aid=120590)acinco

aos(http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.html).
Dosdelastresconsolasdominantesenmateriadevideojuegostienennavegadoresweb
(yunodeellos(http://www.opera.com/devices/wii/)esverdaderamenteexcelente).Estamos
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

1/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

diseandoparamousesyteclados,parakeypadsT9,paradispositivoscontroladoresde
juegos,parainterfacestctiles.Dentrodepoco,nosenfrentaremosconlamayor
cantidaddedispositivos,modosdeentradaynavegadoresconlaquenuncaantesnos
hemosenfrentado.
Enlosltimosaos,meheestadoreuniendocadavezconmscompaasquesolicitan
unsitioparaiPhonecomopartedesuproyecto.Esunafraseinteresante:enuna
lecturaliteralhablaporsupuestodelacalidadmobiledeWebKitcomonavegador,as
comotambindeunpoderosocasodenegocioqueestpensandomsalldel
escritorio.Perocomodiseadores,creoqueamenudodamosunasolucincmodaa
estetipoderequerimientosexplcitos,quenospermitecompartimentarlosproblemas
quetenemosantenosotros.Podemosponerencuarentenaalaexperienciamobileen
subdominios(http://m.nytimes.com/)separados(http://webkit.dailykos.com/),espacios
diferentesyalejadosdel"sitionoiPhone".Peroydespus?UnsitioparaiPad?Otro
paraelN90?Realmentepodemoscomprometernosasoportarcadanuevoagentede
usuarioconsupropiaexperienciaamedida?Enalgnpunto,estoempiezaasentirse
comounjuegodesumacero.Perocmopodemosadaptarnosyadaptaranuestros
diseos?

Uncimientoflexible
Consideremosundiseodeejemplo(http://www.alistapart.com/d/responsiveweb
design/ex/exsiteflexible.html).Construunapginasimpleparaunarevistahipottica;es

unlayoutdirecto,dedoscolumnas,construdoenunagrilla
fluda(http://www.alistapart.com/articles/fluidgrids/),conalgunasimgenes
flexibles(http://unstoppablerobotninja.com/entry/fluidimages)desparramadasporah.Hace
yatiempoquesoydefensordeloslayoutsnofijos,siempresentquetendranms
durabilidadporqueeranagnsticosensulayout.Yesoesverdadhastaciertopunto:los
diseosflexiblesnoasumennadaacercadelanchodelaventanadelnavegadoryse
adaptanhermosamenteadispositivosquetienenmodoshorizontalesyverticales.

(http://www.alistapart.com/d/responsivewebdesign/ex/exsiteflexible.html)
Lasimgenesenormessonenormes.Nuestrolayout,flexiblecomoes,norespondebienacambiosde
resolucinoaltamaodelavista.

http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

2/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

Peroningndiseofludonifijoseescalasinproblemasmsalldelcontextoparael
cualfuepensadooriginalmente.Eldiseode
ejemplo(http://www.alistapart.com/d/responsivewebdesign/ex/exsiteflexible.html)seescala
perfectamentecuandolaventanadelnavegadorcambiasutamao,peroaparecen
puntosdetensinenlasresolucionesmsbajas.Cuandoseobservaenunavistamenor
de800600,lailustracinqueestdetrsdellogosevecortada,eltextodenavegacin
seacomodadeunamaneraimpropiaylasimgenesqueestnenlaparteinferiorse
hacendemasiadocompactascomoparaserlegibles.Ynoslolasmenoresresoluciones
delespectrosevenafectadas:cuandoseobservaeldiseoenunapantallawidescreen,
lasimgenescrecenaenormestamaos,amontonandoelcontenidoquelasrodea.
Resumiendo,nuestrodiseoflexiblefuncionalosuficientementebienenelcontexto
centradoenlacomputadoradeescritorioparaelcualfuediseado,peronoest
optimizadoparaextendersemuchomsall.

Convirtindoseenresponsivo
Recientemente,unadisciplinaemergentellamadaarquitecturaresponsivaha
empezadoapreguntarsecmopuedenlosespaciosfsicosresponderalapresenciade
lagentequeestpasandoatravsdeellos.Atravsdeunacombinacinderobtica
incrustadaymaterialesdetraccin,losarquitectosestnexperimentandocon
instalacionesdearte(http://robotecture.com/bubble/)yestructurasde
paredes(http://vimeo.com/4661618)quesecurvan,doblanyexpandencuandolagentese
acercaaellas.Lossensoresdemovimientosepuedenjuntarconsistemasdecontroldel
climaparaajustarlatemperaturadeuncuartoysuluzambientemientrassellenade
gente.Lascompaasyahanproducidotecnologadevidriosinteligentesquepueden
opacarseautomticamente(http://www.smartglassinternational.com/)cuandolosocupantes
deuncuartosuperanciertoniveldedensidad,dndolesunacapamsdeprivacidad.
EnsulibroInteractiveArchitecture,MichaelFoxyMilesKempdescribieroneste
acercamientoadaptativocomo"unsistemademltiplesciclosenelqueunoentraen
unaconversacin;unintercambiodeinformacincontinuoyconstructivo."Elnfasises
mo,yaquepiensoqueesunasutilperopoderosadistincin:envezdecrearespacios
inmutableseinvariablesquedefinenunaexperienciaparticular,sugierenquelos
habitantesylaestructurapuedenydebeninfluenciarsemutuamente.
Esteeselcaminoaseguir.Enlugardehacerdiseosamedidaydesconectadospara
cadaunodelossiemprecrecientesdispositivosweb,podemostratarloscomofacetas
deunamismaexperiencia.Podemosdisearparaunaexperienciadeobservacin
ptima,peroincrustartecnologasbasadasenestndaresdentrodenuestrosdiseos
parahacerlosnoslomsflexibles,sinomsadaptablesalmedioquelosrenderiza.
Resumiendo,necesitamospracticarundiseowebresponsivo.Perocmo?

Presentandoalamediaquery
DesdelosdasdeCSS2.1,nuestrashojasdeestiloshandisfrutadoalgoascomouna
concienciadeldispositivoatravsdelosmedia
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

3/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

types(http://www.w3.org/TR/CSS21/media.html).Sialgunavezhasescritounahojade
estilosparaimpresin(http://www.alistapart.com/articles/goingtoprint/),yaests
familiarizadoconelconcepto:
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Esperandoqueestuvieramosdiseandomsquebonitosformatosdepginaspara
imprimir,laespecificacinCSSnossuministrunagrupodemediatypes
aceptables(http://www.w3.org/TR/CSS21/media.html#mediatypes),cadaunodeellos
diseadoparaapuntaraunaclaseespecficadedispositivolistoparalaweb.Perola
mayoradelosnavegadoresylosdispositivosnuncasehanadheridoalespritudela
especificacin,dejandovariosmediatypesimplementados
imperfectamente(http://www.alistapart.com/articles/returnofthemobilestylesheet),o
completamenteignorados.
Porsuerte,elW3Ccrelasmediaqueries(http://www.w3.org/TR/css3mediaqueries/)como
partedelaespecificacinCSS3,mejorandolapromesadelosmediatypes.Unamedia
querynospermiteapuntarnosloaciertasclasesdedispositivos,sinorealmente
inspeccionarlascaractersticasfsicasdeldispositivoqueestrenderizandonuestro
trabajo.Porejemplo,siguiendoelrecientecrecimientodeWebKitmobile,lasmedia
queriessehanconvertidoenunatcnicadelladodelclientepopularparaentregaruna
hojadeestilosamedidaparaeliPhone,lostelfonosconAndroidysussemejantes.
Parahacerlo,podemosincorporarunaqueryalatributomediadeunahojadeestilos
linkeada:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetl

Laquerycontienedoscomponentes:
1.unmediatype(screen),y
2.laconsultaentreparntesis,conteniendounacaractersticaainspeccionar(maxdevice-width)seguidaporelvaloralqueapuntamos(480px).

Enotraspalabras,leestamospreguntandoaldispositivosisuresolucinhorizontal
(max-device-width)esigualomenorque480px.Silapreguntapasaenotraspalabras,
siestamosviendonuestrotrabajoenundispositivoconunapantallapequeacomoel
iPhoneentonceseldispositivocargarshetland.css.Delocontrario,ellinkes
completamenteignorado.
Enelpasado,losdiseadoreshanexperimentadoconlayoutsconscientesdela
resolucin,dependiendogeneralmentedesolucionesenJScomoelexcelentescriptde
CameronAdams(http://www.themaninblue.com/experiment/ResolutionLayout/).Perola
especificacindemediaqueryproveeunaseriedecaractersticasdel
medio(http://www.w3.org/TR/css3mediaqueries/#media1)queseextiendenmuchomsall
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

4/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

delaresolucindelapantalla,ensanchandoelalcancedeloquepodemostestearcon
nuestrasqueries.Loqueesmejor,puedestestearmltiplesvaloresdelaspropiedades
enunasolaquery,encadenndolosconlapalabarclaveand:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolut

Adems,noestamoslimitadosaincorporarlasmediaquerieseneltaglink.Podemos
inclurlasennuestroCSScomopartedeunaregla@media:
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

Ocomopartedeunadirectiva@import:
@import url("shetland.css") screen and (max-device-width: 480px);

Yencadacaso,elefectoeselmismo:sieldispositivopasaeltestplanteadopornuestra
mediaquery,elCSSquecorrespondaesaplicadoanuestrocdigo.Lasmediaqueries
son,enresumen,comentarioscondicionales(http://msdn.microsoft.com/en
us/library/ms537512(VS.85).aspx)paratodos.Enlugardeapuntarleaunaversin

especficadeunnavegador,podemoscorregirquirrgicamenteproblemasennuestro
layoutcuandoseescalamsalldesuresolucininicialeideal.

Adaptarse,responderyms
Llevemosnuestraatencinalasimgenesenlabasedenuestrapgina.Ensulayout
pordefecto,elCSSestas:
.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0;

/* 21px / 633px */

width: 31.121642969984202211%;

/* 197px / 633px */

li#f-mycroft,
li#f-winter {
margin-right: 0;
}

Omitalgunaspropiedadestipogrficosparaenfocarnosenellayout:cadaelemento
.figuretieneuntamaodeaproximadamenteunterciodelacolumnaquelocontiene,
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

5/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

conelmargenderechoenceroparalasdosimgenesalfinaldecadafila(li#fmycroft, li#f-winter).Yestofuncionabastantebien,hastaquelavistaeso

notablementemspequeaomsanchaquenuestrodiseooriginal.Conlasmedia
queries,podemosaplicararreglosespecficosparaunaresolucin,adaptandonuestro
diseopararespondermejoraloscambiosenlapantalla.
Antesquenada,linealicemosnuestrapginaunavezquelavistacaepordebajode
ciertaresolucinde,digamos,600px.Asquealfinaldenuestrahojadeestilos,creemos
unnuevobloque@media,delasiguientemanera:
@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}

Siobservasnuestrapginaactualizada(http://www.alistapart.com/d/responsiveweb
design/ex/exsitelinearize.html)enunnavegadormodernoydreduceseltamaodetu

ventanapordebajodelos600px,lamediaquerydesactivarlosfloatsdelosprincipales
elementosdeldiseo,apilandocadabloqueencimadelotroenelflujodeldocumento.
Entoncesnuestrodiseominiaturizadoesttomandounabellaforma,perolas
imgenestodavanosereducentaninteligentemente.Siintroducimosotramedia
query,podemosalterarsulayoutdemaneraconsecuente:
@media screen and (max-width: 400px) {

.figure, li#f-mycroft {
margin-right: 3.317535545023696682%;

/* 21px / 633px */

width: 48.341232227488151658%;

/* 306px / 633px */

li#f-watson, li#f-moriarty {
margin-right: 0;
}

Noledesimportanciaalosporcentajesilegibles;simplementeestamosrecalculando
losanchosdelagrillafluida(http://www.alistapart.com/articles/fluidgrids/)parateneren
cuentaelnuevolayoutlinearizado.Enotraspalabras,estamosmovindonosdeun
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

6/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

layoutdetrescolumnasaunodedoscolumnas(http://www.alistapart.com/d/responsiveweb
design/ex/exsitemini.html)cuandoelanchodelavistacaepordebajodelos400px,

haciendomsprominentesalasimgenes.

(http://www.alistapart.com/d/responsive
webdesign/ex/exsitemini.html)
Nuestrasfiguraspuedencambiarsuestructurademaneraresponsivaparaadaptarsemejorapantallasms
pequeas(http://www.alistapart.com/d/responsivewebdesign/ex/exsitemini.html).

Podemosutilizarelmismoenfoqueparalaspantallaswidescreen.Pararesolucionas
msgrandes,podemosadoptaruntratamientodeseiscolumnasparanuestras
imgenes,situndolastodasenlamismafila(http://www.alistapart.com/d/responsiveweb
design/ex/exsitelarger.html):

@media screen and (min-width: 1300px) {

.figure, li#f-mycroft {
margin-right: 3.317535545023696682%;

/* 21px / 633px */

width: 13.902053712480252764%;

/* 88px / 633px */

Ahoranuestrasimgenesestntrabajandohermosamenteenlosdosextremosdel
espectroderesoluciones(http://www.alistapart.com/d/responsivewebdesign/ex/exsite
larger.html),optimizandosulayoutaloscambiosenelanchodelasventanasyenlas

resolucionesdelosdispositivos.

http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

7/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

(http://www.alistapart.com/d/responsivewebdesign/ex/exsitelarger.html)
Especificandounmin-widthmsanchoenunanuevamediaquery,podemosmoveranuestrasimgenes
enunlayoutdeunasolafila(http://www.alistapart.com/d/responsivewebdesign/ex/exsitelarger.html).

Peroestoessloelcomienzo.Trabajandodentrodelasmediaqueriesqueincrustamos
ennuestroCSS,podemosalterarmuchomsquelacolocacindeunaspocasimgenes:
podemosintroducirnuevoslayoutsalternativos(http://www.alistapart.com/d/responsive
webdesign/ex/exsiteFINAL.html)ajustadosparacadarangoderesolucin,quizs

haciendolanavegacinmsprominenteenunavistadepantallaanchao
reposicionndolaencimadellogoenpantallasmspequeas.

(http://www.alistapart.com/d/responsivewebdesign/ex/exsiteFINAL.html)
Diseandoresponsivamente,noslopodemoslinearizarnuestrocontenidoenlosdispositivosms
pequeos,sinotambinoptimizarsupresentacinalolargodeunampliorangode
pantallas(http://www.alistapart.com/d/responsivewebdesign/ex/exsiteFINAL.html).

Peroundiseoresponsivonoestlimitadoacambiosenellayout.Lasmediaqueries
nospermitenpracticarajustesincreblementeprecisoscuandonuestraspginas
cambiandeforma:podemosaumentarelreaclickeabledenuestroslinkspara
pantallasmspequeas,paracumplirmejorconlaLeyde
Fitts(http://es.wikipedia.org/wiki/Ley_de_Fitts)enlosdispositivostctiles;mostraro
esconderelementosdemaneraselectivaquepuedenmejorarlanavegacindeuna
pgina;podemosinclusopracticarunatipografa
responsiva(http://www.alistapart.com/d/responsivewebdesign/ex/exarticle.html)que
gradualmentealtereeltamaoyespaciadodenuestrotexto,optimizandola
experienciadelecturaparalapantallacorrespondiente.

Algunasnotastcnicas
Debemencionarsequelasmediaqueriesdisfrutandeunsoporteincreblemente
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

8/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

robustoentrelosnavegadoresmodernos.Todoslosnavegadoresdeescritoriocomo
Safari3+,Chrome,Firefox3.5+yOpera7+parseannativamentelasmediaqueries,
comotambinlohacennavegadoresmobilemsrecientescomoOperaMobiley
WebKitmobile.Porsupuesto,lasversionesmsviejasdeesosnavegadoresde
escritorionosoportanmediaqueries.YaunqueMicrosoftsehacompromeitodparadar
soportealasmediaqueriesenel
IE9(http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html),elInternet
Exploreractualmentenoofreceunaimplementacinnativa.
Sinembargo,siestsinteresadoenimplementarcompatibilidadconlosnavegadores
msviejos,hayunrevestimientoteidoenJavaScript:
UnplugindejQuery(http://plugins.jquery.com/project/MediaQueries)de2007ofreceun
soportelimitadodelasmediaqueries,implementandoslolaspropiedadesminwidthymax-widthcuandosonadjuntadasaelementoslinkseparados.

Recientemente,css3mediaqueries.js(http://code.google.com/p/css3mediaqueriesjs/)
fuelanzado,unalibreraqueprometelograrqueIE5+,Firefox1+ySafari2
analicen,testeenyapliquenlasMediaQueriesdeCSS3cuandosonincludasa
travsdelosbloques@media.Aunqueestenunaversin1.0,loheencontrado
bastanterobustoyplaneoobservarsudesarrollo.
PeroesperfectamenteentendiblequenoteatraigausarJavaScript.Sinembargo,eso
fortalecerelcasodequequierasconstruirtuestructuraencimadeunagrilla
flexible(http://www.alistapart.com/articles/fluidgrids/),asegurandotedequetudiseo
disfrutaalgunaflexibilidadenlosdispositivosynavegadoresquenovenlasmedia
queries.

Elcaminoaseguir
Lasgrillasfludas,lasimgenesflexiblesylasmediaqueriessonlostresingredientes
tcnicosparaundiseowebresponsivo,perotambinserequieredeunaforma
diferentedepensar.Enlugardeponerencuarentenanuestrocontenidoendiferentes
experiencias,especficasparacadadispositivo,podemosusarlasmediaqueriespara
realzarprogresivamentenuestrotrabajoenlosdiferentescontextosdevista.Esono
significaquenohaycasosdenegocioenlosqueseapreferiblerealizarsitiospara
dispositivosespecficos;porejemplo,silosobjetivosdelusuarioparatusitiomobile
tienenunalcancelimitadoconrespectoalequivalentedeescritorio,entoncesservir
contenidodiferenteparacadaunopuedeserelmejorenfoque.
Peroesetipodepensamientodeldiseonotieneporquserlaformadepensarpor
defecto.Ahoramsquenunca,estamosdiseandotrabajosdestinadosaservistosen
unagrangamadeexperienciasdiferentes.Eldiseowebresponsivonosofreceun
caminoaseguir,permitindonosfinalmente"disearparaelflujoyreflujodelas
cosas".
TraducidoconelpermisodeAListApartMagazine(http://www.alistapart.com/)yelautor.
http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

9/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

TranslatedwiththepermissionofAListApartMagazine(http://www.alistapart.com/)and
theauthor[s].

Traducciones
Italiano(http://www.italianalistapart.com/articoli/17numero78giugno2010/71webdesign
reattivo)(italianalistapart.com)

Francs(http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/)
(gobanclub.net)
Espaol(http://diseowebresponsivo.com.ar)
IlustracionesporKevinCornell(http://www.alistapart.com/authors/c/kevincornell)

Compartir
(http://www.facebook.com/sharer.php?
u=http://diseowebresponsivo.com.ar&t=Diseo+Web+Responsivo+(Responsive+Web+Design))
(http://del.icio.us/post?
url=http://diseowebresponsivo.com.ar&title=Diseo+Web+Responsivo+(Responsive+Web+Design))
(http://twitter.com/?status=Diseo+Web+Responsivo+
(Responsive+Web+Design):%20http://diseowebresponsivo.com.ar)

AcercadelAutor
EthanMarcotte(http://ethanmarcotte.com/)esundiseadorydesarrollador
webaquienleinteresaprofundamenteeldiseohermoso,elcdigo
elegante,ylainterseccindelosdos.Atravsdelosaos,Ethanha
disfrutadodetrabajarconclientescomoelSundanceFilmFestival,StanfordUniversity,
NewYorkMagazineyTheTodayShow.Insultaprofusamenteen
Twitter(http://twitter.com/beep),ylegustaraserunrobotninja
imparable(http://unstoppablerobotninja.com/)cuandocrezca.

AcercadelTraductor
MinombreesMarceloMazza(http://marcelomazza.com.ar/)ysoyun
diseadorydesarrolladorweb(envasdedesarrollo,ja)de
BuenosAires,Argentina.Seguimeen
Twitter(http://twitter.com/mazzamarcelo)siquers.Cualquier
consultaoaportepodshacerloacontacto@marcelo
mazza.com.ar.
Estapginafuearmadaenpoqusimosminutosgraciasa
Inuitcss(http://csswizardry.com/inuitcss/).

http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

10/11

2/15/2016

Diseo Web Responsivo (Traduccin de Responsive Web Design de A List Apart)

ISSN:15340295Copyright(http://www.alistapart.com/copyright/)19982011AList
ApartMagazineandtheauthors.

Suscrbete a nuestra lista (sin spam)

Email

Nombre

Sus

cribirse

http://xn--diseowebresponsive-q0b.org/?utm_source=redirects&utm_medium=dise%25C3%25B1owebresponsivo.com.ar&utm_campaign=301_Redirects

11/11