Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive Web Design - Reinventando la web
Search
Swwweet
April 27, 2012
Technology
15
4.7k
Responsive Web Design - Reinventando la web
Presentación de Javier Usobiaga en el Ideateca HTML5 DevUp 2012.
Swwweet
April 27, 2012
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
340
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
510
Mobile First: as difficult as doing things right
swwweet
224
9.9k
One Size Fits None
swwweet
12
860
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
590
Other Decks in Technology
See All in Technology
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
170
2025年夏 コーディングエージェントを統べる者
nwiizo
0
170
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
150
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
830
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
160
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
220
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Language of Interfaces
destraynor
161
25k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
A Tale of Four Properties
chriscoyier
160
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Transcript
RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN reinventando
el diseño web Javier Usobiaga #DevUp12
@htmlboy @htmlboy @htmlboy trabajo en Swwweet.com
¿Qué es el responsive web design? ¿Qué es el responsive
web design? ¿Qué es el respoNsive web design?
¿Qué es LA web? ¿Qué es LA web? ¿Qué es
LA web?
obsesión obsesión historia de una obsesión por el control
1990s 1990s 1990s la web mide 800px
2000s 2000s 2000s la web mide 1024px
2007 2007 2007 + la web mide 1024px y 320px
2010 2010 2010 + + la web mide 1200px y
320px y 768px
2012 2012 2012 + + la web mide 1200px y
320px y 768px y 1800px +
2012 2012 2012 + + ¿320px? +
2012 2012 2012 la web mide 256px y 320px y
426px y 480px y 560px y 640px y 768px y 800px y 960px y 1024px y 1280px y 1440px y 1600px y 1800px… + + + +
¡BASTA! ¡BASTA! ¡BASTA! es hora de aceptar la naturaleza de
la web
LA WEB ES LA WEB ES LA WEB ES fluida
universal multidispositivo
primer acto RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB
DESIGN
2012.dconstruct.org
mediaqueri.es
¿PERO CÓMO? ¿PERO CÓMO? ¿PERO CÓMO? retículas flexibles elementos multimedia
flexibles @media queries
RETÍCULAS RETÍCULAS RETÍCULAS 16% 16% 16% 16% 16% 16% 16%
16%
RETÍCULAS RETÍCULAS RETÍCULAS target contexto ÷ resultado
RETÍCULAS RETÍCULAS RETÍCULAS .grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%}
MULTIMEDIA MULTIMEDIA MULTIMEDIA img, video{ max-width:100% }
MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES @media screen and (max-width:320px){
.columna_lateral{ width: 100%; float: none; } }
MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES cambiar el layout cambiar
los estilos aumentar el tamaño de la tipografía
workflow workflow workflow segundo acto
CASCADA CASCADA CASCADA DISEÑO UX DISEÑO VISUAL FRONT END JEFE
CASCADA CASCADA CASCADA Hola, quería una web...
CASCADA CASCADA CASCADA ¡Claro!
CASCADA CASCADA CASCADA Empezaré por definir las estructuras en unos
wireframes.
CASCADA CASCADA CASCADA Le damos un poco de color...
CASCADA CASCADA CASCADA Unos CSS por aquí, un JS por
allá... ¡Y ya tenemos web!
CASCADA CASCADA CASCADA Uh... esto...
FAIL fail Fail
responsive responsive Responsive
diez consejos diez consejos diez consejos tercer acto
1. Comunicación Entre todo el equipo, durante todo el ciclo
de vida del proyecto.
2. Diseño y front-end, juntos El proceso está lleno de
decisiones que se toman sobre la marcha.
3. Microentregas El cliente participa activamente y ayuda a tomar
decisiones.
4. Lo primero, el contenido Haz un inventario del contenido
y busca sus límites.
5. Identifica puntos críticos Navegación, imágenes, publicidad, jerarquía informativa…
6. Mobile first La pantalla pequeña es el primer límite.
7. Bocetos de referencia Crea bocetos básicos para jerarquizar el
contenido.
8. Prototipa rápido Empieza a ver la página en HTML
cuanto antes.
9. Diseña en el navegador Toma decisiones de diseño a
medida que ves cómo quedan en pantalla.
10. Diseña todo a la vez Desarrolla pensando en los
diferentes tamaños al mismo tiempo.
EN RESUMEN EN RESUMEN EN RESUMEN no se puede dominar
la web RWD es una solución viable si cambiamos la mentalidad
¡gracias! ¡gracias! ¡gracias! Javier Usobiaga · http://Swwweet.com · @htmlboy