RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN ( RWD ) es un diseo web destinado a la

elaboracin de sitios para proporcionar una experiencia de visualizacin de fcil
lectura ptima y navegacin con un mnimo de cambio de tamao, paneo, y el
desplazamiento a travs de una amplia gama de dispositivos (desde telfonos
mviles a la computadora de escritorio monitores).
Un sitio diseado con RWD se adapta el diseo de un entorno de visualizacin
mediante el uso de fluidos, redes basadas en proporcin, imgenes
flexibles, y CSS3 preguntas de los medios , una extensin de la media regla.
El fluido rejilla concepto exige elemento de pgina de tamao para estar en
unidades relativas, como porcentajes, en lugar de unidades absolutas
como pxeles o puntos .
Imgenes flexibles tambin estn dimensionadas en unidades relativas, a fin de
evitar que se presentan fuera de su que contiene elemento .
Consultas de los medios de comunicacin permiten a la pgina de utilizar
diferentes reglas de estilo CSS basadas en las caractersticas del dispositivo del
sitio se muestra en, por lo general el ancho del navegador.
Qu es el diseo de sitios web Responsive?
Diseo web responsive y el desarrollo es una tcnica que crea una pgina web o
sistema que se ajusta a la pantalla del usuario. Con un diseo de respuesta, la
experiencia de navegacin de un usuario se ha optimizado gracias a la pgina
web flexible y sensible que se crea.
Es una tcnica de desarrollo extremo frontal, en el que el contenido y la
disposicin responden al tamao de la pantalla que se ve en. Con el fin de
averiguar cmo funciona esto, trate de cambiar el tamao de su navegador. Una
vez hecho esto, usted encontrar una serie de cosas que suceden, como, las
reas se reducen, las fuentes sern ms pequeos en tamao, y el diseo va a
cambiar, etc., con el fin de encajar en el contenido de su presente tamao de la
pantalla.
Problema con el diseo de respuesta: Imgenes
Diseo de respuesta es una gran ideal Por ahora todos lo sabemos. Sin embargo,
lo que muchos de nosotros no sabemos es que esta tcnica tiene un problema,
que es, la porcin de la imagen. Cuando un dispositivo de mano se encoge las
imgenes en un navegador que hace mal uso de una gran cantidad de ancho de
banda, as como de la CPU. Sin embargo, usted no necesita preocuparse
demasiado porque PHP est ah para su rescate. El lenguaje de programacin se
puede utilizar para las imgenes y la aplicacin de servidor que responde o RSS
Adaptive Server.

Imgenes Responsive
Como se mencion anteriormente, ve una imagen en el escritorio de tamao en
una pantalla mvil es slo una prdida de ancho de banda y CPU. Para colmo, si
el usuario est utilizando una conexin a Internet mediocre, la experiencia de
navegacin del sitio se agrava. Por qu? Todos ellos contribuyen a que el sitio de
carga lenta, por lo tanto, irritando a sus consumidores potenciales.
A continuacin se presenta un enfoque ms prudente para servir imgenes en un
sitio sensible:
Uso de JavaScript para detectar el tamao de la pantalla del cliente y
almacenarlo en una cookie.
Re-enrutamiento de solicitudes de imgenes en un archivo PHP.
Permitir que el archivo PHP para decidir si la imagen original se ajuste al tamao
de la pantalla del usuario.
Si se est bien, la solicitud procede como de costumbre. Sin embargo, si no lo
es, entonces la imagen se redimensiona, servido y almacenado por PHP para
solicitudes futuras.
Procedimiento sencillo, no? S y no as. S porque el proceso es de hecho corta,
y no porque se trata de algo de cdigo que no puede ser deshecha; de lo
contrario, puede daar ms que ayudar a un sitio sensible.
Imgenes adaptativos caractersticas
No hay alteraciones de marcado
Trabajo en el sitio web ya existente
Mobile-primero
Dispositivo agnstico
en funcionamiento en pocos minutos

Conceptos relacionados
Mobile primero, discreto JavaScript, y la consolidacin progresiva
"Mobile primero", discreto Java Script , y la consolidacin progresiva (estrategias
para cuando se est considerando un nuevo diseo del sitio) son conceptos que
antecedieron RWD relacionados: navegadores de telfonos mviles bsicos no
entiendo Java Script o preguntas de los medios , por lo que la prctica
recomendada es crear un sitio web bsico, y mejorarlo para telfonos inteligentes
y PCs en lugar de tratar degradacin elegante para hacer un complejo, lugar de
trabajo, la imagen pesada en los telfonos mviles ms bsicos.
Mejora progresiva basada en navegador de Web o caracterstica de
deteccin
Cuando un sitio web debe ser compatible con dispositivos mviles bsicos que
carecen de Java Script, el navegador ("agente de usuario") de deteccin (tambin
llamado " browser sniffing "), y la deteccin de dispositivos mviles son dos
maneras de deducir si cierta HTML y CSS caractersticas son compatibles (como
base para la mejora progresiva) -sin embargo, estos mtodos no son
completamente fiables a menos que se utiliza en conjuncin con una base de
datos de capacidades del dispositivo.
Para telfonos mviles y ordenadores ms capaces, frameworks de
JavaScript como Modernizr , jQuery y jQuery Mobile que puede directamente
apoyo navegador de pruebas para las caractersticas de HTML / CSS (o identificar
el dispositivo o agente de usuario) son populares. polyfills se puede utilizar para
agregar soporte para funciones .
por ejemplo para apoyar a preguntas de los medios (necesario para RWD), y
aumentar el apoyo HTML5, en Internet Explorer deteccin de
caractersticas tambin podra no ser completamente confiable: algunos pueden
informar de que una funcin est disponible, cuando no est presente o tan mal
implementado que es efectivamente no funcional.