Presentación de Javier Arques para el Frontenders Valencia del 11 de abril de 2013. Una introducción al Responsive Web Design con ejemplos prácticos.
Web de ejemplo:
http://servidordeprueba.net/webs/responsive-talk/
Ficheros de ejemplo:
https://github.com/frontenders/responsive-talk
Frontenders: http://valencia.frontenders.me/
5. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
URL y HTML propio
6. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
Google ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor UI/UX
URL y HTML propio misma URL y HTML
7. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
Google ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor UI/UX
URL y HTML propio misma URL y HTML misma URL
HTML&CSS propio
Igual que DEDICADA
Más código
Detección del
dispositivo en el servidor
15. FLEXIBILIZA TU LAYOUT
Contenido fluido (%)
Tamaño en porcentaje = tamaño/total x 100
300px / 960px x 100 = 31.25%
box-sizing: border-box. Incluye el padding y el
borde en el ancho total (IE8+)
26. SERVER RESPONSIVE IMAGES
.htaccess
para redireccionar todas las
imágenes a adaptive-images.php
adaptive-images.php
creará las imágenes y las cacheará
javascript
creará una cookie que guarde el
tamaño de tu pantalla
http://adaptive-images.com/
30. width (permite min,max)
@media screen and (min-width: 400px)
and (max-width: 700px) { … }
device width (permite min,max)
@media screen and (device-width:
800px) { … }
orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
MEDIA TYPES MEDIA FEATURES
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv
31. TAMAÑOS BÁSICOS
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
47. Responsive Web Design por Ethan Marcotte http://alistapart.com/article/responsive-web-
design
SIXREVISIONS: A comparison of Methods for Building Mobile-Opimized Websites http://
sixrevisions.com/mobile/methods-mobile-websites/
MASHABLE: 85 Top Responsive Web Design Tools de Mashable http://mashable.com/
2013/03/18/web-design-tools/
The Responsinator (testing): http://www.responsinator.com/
RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?
1392
RECURSOS