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.6k
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
260
How to be the best web designer in the world.
swwweet
6
1.1k
Design for loading
swwweet
5
430
Mobile First: as difficult as doing things right
swwweet
219
8.8k
One Size Fits None
swwweet
12
780
One Size Fits None - From the Front 2013
swwweet
2
630
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
480
Other Decks in Technology
See All in Technology
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
It's Worth the Effort
3n
181
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
What's in a price? How to price your products and services
michaelherold
239
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
We Have a Design System, Now What?
morganepeng
46
7k
A better future with KSS
kneath
231
17k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
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