Cómo construir un sitio web receptivo

No podrá construir un diseño como el Verge sin años de experiencia si comienza desde cero.

Pero, si estás interesado en aprender:

1. Comience aprendiendo HTML y CSS. W3Schools Online Web Tutorials no es un mal lugar para comenzar.
2. Decida qué tamaños de pantalla desea admitir (generalmente, aproximadamente 3: móvil, tableta, computadora).
3. Instale los tipos de página de su sitio (probablemente 4 o 5 si lo mantiene limpio) y cree las versiones alternativas para responder. Use algo como Balsamiq u otra herramienta de estructura de alambre para esto.
4. Diseñe las páginas reales en un editor de imágenes (por ejemplo, Photoshop). Cortar los elementos separados.
5. Cree los modelos HTML y CSS basados ​​en wireframes y diseño (solo los cuadros, por ejemplo, DIV).
6. Complete CSS adicional basado en el diseño (no olvide crear sprites para los elementos de imagen).
7. Realice todos los trucos y trucos para responder (esto requerirá cierta comprensión de Javascript, así que regrese a W3Schools). Prueba, prueba, prueba de nuevo, agrega más trucos y trucos. Renunciar a algunos de los hacks. Compromiso.
8. Pruebe y reitere los pasos anteriores según sea necesario.

Pero primero, date cuenta de un par de cosas:

• Aprender y hacer lo anterior en 5 semanas es ambicioso, por decir lo menos, a menos que seas un mago / ninja / estrella de rock experimentado.
• Ni siquiera entré en usabilidad (y pruebas de usabilidad).
• Ignore completamente la parte de “convertir esto en plantillas para un sistema”.

Y sí, ese último punto significa que hay un “detalle menor” más: esto es solo la superficie . Eso es justo lo que los visitantes verán (y lo que tendrás si, milagrosamente, terminas lo anterior en 5 semanas). Si habla de la “mera plataforma” … bueno, hay mucho trabajo de fondo, cosas como administrar el contenido y asegurarse de que puede publicarlo de manera efectiva:

• También tendrá que crear una arquitectura de información (cómo se ve su contenido, qué tipos de contenido tendrá, de dónde vienen y hacia dónde van).
• Tendrá que descubrir los diversos escenarios para los editores y cómo funcionan en el contenido.
• Tendrá que elegir una plataforma para desarrollar o un CMS para implementar.
• Tendrá que aprender cómo funciona y construir el IA, el flujo de trabajo y las plantillas.
• Probablemente también tendrá que integrar varias herramientas de terceros en él.

Tenga en cuenta eso, y comprenderá que hacer todo eso en menos de 6 meses sería milagroso, y casi imposible si solo tiene habilidades de “programación a nivel escolar”. (A menos que fueras a la escuela de magos / ninja / rockstar).

También es la razón por la cual la mayoría de las nuevas empresas de blog simplemente eligen algo que está relativamente listo para usar, es decir, WordPress, y encuentran una buena plantilla receptiva en algún lugar. Y luego hackea esto en cómo quieren que se vea. Le ahorrará mucho tiempo en los pasos 1-8 anteriores, y hay un montón de experiencia de la que simplemente puede buscar en Google y leer. Será muy difícil lograr que se vea exactamente como lo desea, ¡pero al menos es factible en 5 semanas! Buena suerte 🙂

Proceso
Un proceso demasiado simplificado que puede seguir:

1. Defina una estructura arquitectónica simple para su sitio web.
2. Crea tu contenido necesario.
3. Reduzca ese contenido hasta que no pueda eliminar más.
4. Refinar la estructura según sea necesario.
5. Cargue el contenido en un contenedor pequeño (~ 320px de ancho) utilizando los elementos HTML apropiados.
6. Refina y da estilo a tu contenido.
7. Ahora expanda gradualmente el ancho de su contenedor hasta que el flujo comience a romperse o el medidor sea demasiado largo. Escriba consultas de medios para atenderlas. es decir, el contenido alineado al centro no funcionará tan bien en resoluciones más altas, así que cambie a contenido alineado a la izquierda cuando comience a verse mal.
8. Aplica el contenido a mayores resoluciones utilizando imágenes más ricas (u opcionalmente agregando efectos posteriores como animaciones. (Mejora progresiva es la palabra clave aquí)
9. Pruebe su sitio en un laboratorio de dispositivos móviles.

Adagios para seguir
Debe intentar seguir estos principios:

• Contenido primero: los usuarios se relacionan principalmente con el contenido.
• Mobile First (atiende primero las capacidades bajas cuando comienzas a construir tu sitio, es decir, baja resolución, JavaScript deficiente, CSS deficiente)
• Mejora progresiva (use Javascript de una manera que enriquezca su sitio, no dicte su uso; JavaScript es costoso)
• Establezca puntos de interrupción por flujo de contenido, no por resoluciones explícitas del dispositivo. (La web es consumida por una plataforma adimensional; definir puntos de interrupción mediante resoluciones fijas es una locura)

Si desea hacer un sitio web desde cero por su cuenta, entonces hay 3 pasos para hacerlo.

1. Diseño de PSD: al usar Photoshop, puede crear un diseño web. Es una representación gráfica de su sitio web. Sin PSD, no es posible hacer un HTML.
2. Codificación HTML: no podemos ejecutar una PSD o una imagen en un navegador, por lo que necesitamos HTML. En HTML, tenemos que convertir un PSD en codificación del lado del cliente. Le ayudará a ejecutar el diseño en su navegador. Si quisiéramos hacer un diseño receptivo, entonces hay 2 opciones para hacerlo. La primera opción es que podemos usar @media en nuestro archivo CSS o podemos usar el marco de arranque. Te sugiero que uses bootstrap. Le ayudará a escribir un código organizado fácilmente y también su sitio web responderá de forma predeterminada.
3. Conversión de temas de WordPress: esta parte no es obligatoria; puede mantener su sitio web en formato HTML. Pero sugeriré convertirlo a WordPress, aunque no es necesario abrir la codificación para cambiar el contenido. Obtendrá un panel de administración y podrá cambiar el contenido desde allí. Si su sitio web está en WordPress, entonces no necesita saber codificación para cambiar el contenido de su sitio web.

Creo que esta no es una opción rentable para crear un sitio web receptivo. Porque tiene que pasar 10-15 días para hacer eso o necesita contratar a un profesional.

Para crear un sitio web receptivo, debe elegir un tema adaptable de WordPress o puede elegir una plantilla HTML receptiva . Al usar WordPress puede configurar y administrar su sitio web por su cuenta, pero para eso, necesita un tema de WordPress receptivo o puede convertir una plantilla HTML receptiva en un tema de WordPress.

Hoy bootstrap es un marco HTML muy popular. Al usar bootstrap, puede crear fácilmente una plantilla HTML receptiva. Al usar la cuadrícula bootstrap, puede hacer que un dispositivo de sitio web sea independiente fácilmente. Solo necesitas saber cómo funciona.

Para crear un sitio web, le sugiero que compre un tema premium de WordPress. Obtendrá apoyo del autor para configurar su sitio web de forma gratuita. Le sugiero que elija WordPress porque es gratuito y su repositorio de complementos es enorme. Por lo tanto, obtendrá tantos complementos importantes de forma gratuita.

Hoy, un sitio web no debe verse bien solo en una pantalla de escritorio, sino también en tabletas y teléfonos inteligentes. Un sitio web responde si es capaz de adaptarse a la pantalla del cliente. Aquí hay 3 pasos para que su sitio web responda.

1 – El diseño

Al construir un sitio web receptivo , o al hacer que un sitio existente sea receptivo, el primer elemento a considerar es el diseño. Cuando construyo sitios web receptivos, siempre empiezo creando un diseño que no responde, fijado en el tamaño predeterminado. Por ejemplo, el ancho predeterminado de CatsWhoCode es 1100px. Cuando estoy satisfecho con la versión que no responde, agrego consultas de medios y ligeros cambios a mi código para que el código responda. Es mucho más fácil concentrarse en una tarea a la vez.

Una consulta de medios consta de un tipo de medio y cero o más expresiones que verifican las condiciones de características de medios particulares. Mediante el uso de consultas de medios, las presentaciones se pueden adaptar a una gama específica de dispositivos de salida sin cambiar el contenido en sí. En otras palabras, las consultas de medios permiten que su sitio web se vea bien en todo tipo de pantallas, desde teléfonos inteligentes hasta pantallas grandes.

Las consultas de medios dependen del diseño de su sitio web, por lo que es un poco difícil para mí proporcionarle un fragmento de código listo para usar. Sin embargo, el siguiente código es un buen punto de partida para la mayoría de los sitios web.

2 – Medias

Un diseño receptivo es el primer paso para un sitio web totalmente receptivo. Ahora, centrémonos en un aspecto muy importante de un sitio web moderno: medios, como videos o imágenes.

El siguiente código CSS garantizará que sus imágenes nunca sean más grandes que su contenedor principal. Es súper simple y funciona para la mayoría de los sitios web. Tenga en cuenta que la directiva de max-width no es reconocida por navegadores antiguos como IE6. A veces puede necesitar tener más control sobre las imágenes y mostrar una imagen diferente de acuerdo con el tamaño de visualización del cliente.

3 –Tipografía

Hasta ahora, la mayoría de los desarrolladores (¡incluido yo mismo!) Utilizaban píxeles para definir los tamaños de fuente. Si bien los píxeles están bien cuando su sitio web tiene un ancho fijo, un sitio web receptivo debe tener una fuente receptiva. De hecho, un tamaño de fuente sensible debe estar relacionado con el ancho del contenedor principal, para que pueda adaptarse a la pantalla del cliente.

La especificación CSS3 incluía una nueva unidad llamada rems. Funcionan casi de manera idéntica a la unidad em, pero son relativos al elemento html, lo que los hace mucho más fáciles de usar que ems.

Como los rems son relativos al elemento html, no olvide restablecer el tamaño de fuente html. Tenga en cuenta que los navegadores antiguos no reconocen la unidad rem, así que no olvide implementar un respaldo.

En el mundo actual de Internet, el sitio web desempeña el papel más importante para que cualquier industria / organización prospere. Cuanto más atractiva e informativa sea la calidad del sitio web que tenga, más tráfico puede desviar hacia él. Lo más importante que necesita para crear un sitio web receptivo es tener algo que decir. Lo que necesita a continuación es un nombre de dominio y alojamiento. El dominio es el nombre de su sitio, debe ser único y, en general, debe contener información significativa sobre usted o su empresa. Ahora todo lo que necesita es alojar su nuevo sitio donde realmente pueda “en vivo”.

ACTUALIZAR:

Aprenda Web Design Experts de la industria de formularios: – HAGA CLIC AQUÍ PARA INSCRIBIRSE

El diseño receptivo es un enfoque para la creación de páginas web que utiliza diseños flexibles, imágenes flexibles y consultas de hojas de estilo en cascada. Ahora puede crear su propio sitio web receptivo de manera rápida y eficiente, lo que le permite mostrar su contenido en un formato que funcione en cualquier dispositivo con un navegador de Internet, como computadoras de escritorio, computadoras portátiles, tabletas y teléfonos inteligentes.

¿Por qué las empresas deben considerar la adopción de sitios web receptivos? Los siguientes son algunos de los motivos:

• Google prefiere diseño receptivo
• El uso móvil está aumentando rápidamente
• Es eficiente y más fácil de administrar
• El diseño receptivo del sitio web aumenta las conversiones

Discutamos ahora sobre cómo construir un sitio web html simple y receptivo:

El diseño: cuando crea un sitio web receptivo o crea un sitio web existente, un sitio web receptivo, lo más importante es el diseño. Lo primero que debe hacer es pegar las siguientes líneas dentro de las etiquetas y en su página html. Esto establecerá la vista en todas las pantallas en una relación de aspecto 1 × 1 y eliminará la funcionalidad predeterminada de los iPhones y otros navegadores de teléfonos inteligentes, lo que dará a los sitios web una vista completa y permitirá a los usuarios ampliar el diseño pellizcando.

Los medios: Esto incluirá el aspecto más importante de un sitio web moderno, como videos o imágenes. La forma más sencilla y eficiente de garantizar que sus imágenes nunca sean más grandes que su contenedor principal es utilizar el código de hojas de estilo en cascada (css).

La tipografía: la tipografía es básicamente la forma en que el diseño de la página deseada logra el efecto visual deseado y transmite el significado de la lectura.

Un tamaño de fuente sensible debe estar relacionado con el ancho del contenedor principal, para que pueda adaptarse a la pantalla del cliente.

Incluso puede presentar Google Progressive Web Apps, una nueva forma de hacer que la experiencia del usuario sea confiable, rápida y atractiva. Crea una experiencia web increíble para el móvil también donde puede terminar con buenas conversiones de negocios.

Bueno, crear una experiencia adaptativa para el sitio web permite que su contenido vaya a más lugares, lo que en última instancia significa más oportunidades para llegar a clientes potenciales donde sea que se encuentren en todo el mundo. Al apegarnos a los principios de mejora progresiva y abordar las restricciones primero, estamos sentando una base favorable para el futuro que le da a nuestro sitio una mejor oportunidad de trabajar en futuros navegadores y entornos.

Sugiero lo siguiente para mantenerse informado sobre el desarrollo web receptivo:

1. El diseño / desarrollo web receptivo en realidad está muy relacionado con el conocimiento de CSS3 y HTML en profundidad. Aprenda acerca de las unidades CSS y piense todo en relación con la ventana gráfica de documentos. Evite píxeles para diseños y cuadrículas. Evite las tablas y use divs. Use marcado semántico.
2. Aprenda acerca de las consultas de medios CSS y tenga una comprensión profunda de las variaciones de parámetros y navegador.
3. Últimamente hay una gran discusión en la web sobre este tema, únete a algunos buenos, sigue a las personas adecuadas y suscríbete al boletín de diseño receptivo. Esto te mantendrá actualizado.
4. Practica mucho. Escriba aplicaciones nativas, escriba tramas de sitios web y apóyese por sus errores (y los de otros) a medida que avanza.
5. Use un buen marco una vez que comprenda los conceptos básicos. Hay muchos marcos de cuadrícula receptivos en la web que hacen que las cosas sean robustas, fáciles y rápidas. Aquí hay algunos para echar un vistazo y leer el código: Bootstrap, Pure, el marco front-end receptivo más avanzado de ZURB, Topcoat, un marco web CSS, Gridism • una simple cuadrícula CSS responsiva de @cobyism, React | Una biblioteca de JavaScript para construir interfaces de usuario, GroundworkCSS Un marco HTML5, CSS y Javascript receptivo, Un marco CSS limpio y elegante.

Bueno, depende de un par de cosas.

Para comenzar, es importante saber cómo se ha creado su sitio web y qué herramientas se han utilizado para hacerlo.

Codificado
Si se ha codificado completamente a mano en HTML5, CSS y Javascript, entonces las cosas se vuelven un poco más complicadas porque eso requeriría que escribas un código adicional para que el sitio responda. Recomiendo consultar los Tutoriales web en línea de W3Schools para eso → Diseño web sensible a HTML.

Construyendo un nuevo sitio web
Ahora, si está construyendo un sitio web desde cero, debe ver qué marco se adapta mejor a sus necesidades. Puede comenzar codificando su propio sitio web utilizando Bootstrap, que es un marco que utiliza muchas secciones y componentes preconstruidos. Estos ya son totalmente receptivos y solo requieren que agregue su propio contenido y estilo todo usando CSS.

Flujo web
Lo que recomiendo usar es Webflow (herramienta de diseño web receptiva, CMS y plataforma de alojamiento | Webflow).

Mi Agencia de Desarrollo Web utiliza Webflow para crear hermosos sitios web personalizados y totalmente receptivos. Web Vulcano | Desarrollo web

Webflow le permite construir su sitio web utilizando elementos de arrastrar y soltar como Secciones, Bloques Div, Bloques de enlace, Bloques de texto, Lightboxes y mucho más. O puede comprar una plantilla en la tienda de plantillas Plantillas de sitios web responsivos HTML5 | Flujo web

Una vez que haya diseñado su sitio de escritorio, puede continuar y realizar cambios en su sitio web para que sea totalmente receptivo y funcione / se vea genial en Tablet y Mobile.

Ahora Webflow es un poco más difícil de entender porque básicamente estás trabajando con HTML y CSS. Entonces podrías usar algo como:

• Squarespace (construir un sitio web)
• WordPress (WordPress.com: Cree un sitio web o blog gratuito)
• Weebly (Weebly es la forma más fácil de crear un sitio web, tienda o blog)

Y luego recomiendo comprar una plantilla atractiva y usarla como base de su sitio web.

Espero que haya respondido a su pregunta o al menos le haya dado una mejor comprensión de cómo puede crear un sitio web receptivo.

–

Rob Eradus

Al crear un sitio web receptivo , siempre comience creando un diseño que no responda, fijado en el tamaño predeterminado. Agregue consultas de medios y ligeros cambios al código para que el código responda. Cuando haya terminado con su sitio web que no responde, lo primero que debe hacer es pegar las siguientes líneas dentro de las etiquetas y en su página html. Esto establecerá la vista en todas las pantallas en una relación de aspecto 1 * 1 y eliminará la funcionalidad predeterminada de los iPhones y otros navegadores de teléfonos inteligentes que muestran los sitios web a plena vista y permiten a los usuarios ampliar el diseño pellizcando. El segundo aspecto de los sitios web receptivos son medios como videos o imágenes. El siguiente código CSS garantizará que sus imágenes nunca sean más grandes que su contenedor principal. Es súper simple y funciona para la mayoría de los sitios web.

Tipografía : un sitio web receptivo debe tener una fuente receptiva, un tamaño de fuente receptivo debe estar relacionado con el ancho del contenedor principal, para que pueda adaptarse a la pantalla del cliente.

para más detalles, visite ahora: Empresa de desarrollo de aplicaciones web y móviles con sede en India y Australia

Es fácil construir sitios receptivos. Aquí está la guía breve que puede usar para comenzar.

En primer lugar, cree su contenido y estructura. El contenido es el aspecto más importante del sitio web. Luego, cree una estructura de página basada en este contenido.

Creación de titulares:

El formulario de notificación de solicitud de titulares son los componentes críticos de nuestra página web. Estos deben ser presentados al usuario de inmediato. Agregue texto simple para describir el curso en el título.

Crear video con respecto a la información:

La sección de información de video del contenido contendrá con más profundidad.

Creación de la sección de imágenes:

Los sitios sin imágenes pueden ser aburridos. Hay dos tipos de imágenes: 1. Imágenes de contenido, 2. Imágenes estilísticas. La sección de Imágenes en nuestra página es una colección de imágenes de contenido. Las imágenes están configuradas para escalar al 100% del ancho de la pantalla.

Agregar sección de datos tabulados:

Añadir pie de página:

La mayoría de los sitios necesitan un pie de página para mostrar contenido como renuncias, términos y condiciones y otro contenido.

Hemos creado el esquema del sitio y hemos identificado todos los elementos estructurales principales.

Ahora haz que responda. Servicios de diseño web receptivos .

Suponiendo que tiene una comprensión básica de HTML / CSS.

CSS2 le permite especificar una hoja de estilo para un tipo de medio específico, como pantalla o impresión. CSS3 lo hace aún más eficiente al agregar consultas de medios. Puede agregar expresiones al tipo de medio para verificar ciertas condiciones y aplicar diferentes hojas de estilo.

Por ejemplo, puede tener una hoja de estilo para pantallas grandes y una hoja de estilo diferente específicamente para dispositivos móviles. Es bastante potente porque le permite personalizar diferentes resoluciones y dispositivos sin cambiar el contenido. Continúe en esta publicación para leer el tutorial y ver algunos sitios web que hacen un buen uso de las consultas de los medios.

Consultas de medios para dispositivos estándar | CSS-Tricks

Otros complementos y marcos populares utilizados para sitios web receptivos
HTML5 Boilerplate : HTML5 Boilerplate es una plantilla front-end profesional para crear sitios o aplicaciones web rápidas, robustas y adaptables.

Bootstrap : Bootstrap es un marco CSS construido sobre cuadrículas, diseños y componentes receptivos de 12 columnas. Ya sea que necesite una cuadrícula fija o una receptiva, solo es cuestión de unos pocos cambios. La compensación y anidamiento de columnas también es posible en diseños de ancho fijo y fluido.

Foundation : Foundation es el competidor más importante de Twitter Bootstrap ya que los dos proyectos son muy similares. Al igual que Bootstrap, Foundation le ofrece una cuadrícula receptiva y varios elementos de interfaz de usuario con estilo.

Respond.js : este script permite diseños web receptivos en navegadores que no admiten consultas de medios CSS3, en particular, Internet Explorer 8 y versiones inferiores.

Recursos de aprendizaje:

• Diseño web adaptable
• Libro de diseño web receptivo
• RWD: qué es y cómo usarlo
• Guía para principiantes sobre diseño web receptivo
• Diseño web receptivo en Wikipedia
• ¿Qué diablos es el diseño web receptivo?
• Fundamentos de RWD

Hola,

Puede hacerlo de cualquiera de las dos formas siguientes:

1. Codificación manual , que incluye HTML / CSS, tal como lo explican la mayoría de las personas mencionadas anteriormente. Solo asegúrese de haber dejado de lado el tiempo suficiente para esto.

2 Busque una herramienta de creación de sitios web que facilite la creación receptiva de wesbite. Con esto, literalmente elimina la necesidad de codificar su sitio web y, en su lugar, utiliza tecnologías como Arrastrar y soltar, etc.

Esto reduce considerablemente el tiempo de configuración de su sitio web. Algunas herramientas, como Goshly, también ofrecen servicios de alojamiento web incorporados para que no necesite ir a ningún otro lugar para alojar su sitio web. Simplemente seleccione un tema entre más de 1000 plantillas impresionantes y comience a crear su sitio web personalizado.

Espero que la información anterior haya sido útil.

Hay muchas formas de crear un sitio web receptivo como,

1. Oreja,
2. Preguntas de los medios,
3. Rasguño

Puedes usar Bootsrap,

• Bootstrap es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos para dispositivos móviles.
• Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales, carruseles de imágenes y muchos otros, así como complementos de JavaScript opcionales.
• Bootstrap también le brinda la capacidad de crear fácilmente diseños receptivos .

Tutorial de Bootstrap 3 (puede consultar este enlace para crear un sitio web de respuesta rápida)

Otra forma es mediante la consulta de medios, la consulta de medios es una técnica CSS introducida en CSS3.

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si cierta condición es verdadera.

Diseño web receptivo (puede consultar esto si conoce CSS3 perfecto)

El diseño web receptivo es una técnica de diseño de sitios web en boga, en los últimos tiempos le permite personalizar el contenido de las páginas en cualquier resolución u orientación de la pantalla en la que está navegando. Digamos dos cosas importantes, la primera es que, por supuesto, un sitio web ‘no responde’ se mostrará también en cualquier pantalla, pero lo más probable es que obligue al navegador a desplazarse horizontalmente o hacer zoom en la página continuamente para poder leer el contenido, lo que lo hace muy difícil y dramáticamente aumentando las posibilidades que nuestro querido si el usuario le da a sus talones.

La segunda es que el diseño receptivo no es la única oportunidad que tenemos de hacer que un sitio web sea apto para dispositivos móviles, pero definitivamente es la mejor opción en muchos casos porque evita crear versiones especiales de cada página para cada tipo de dispositivo.

Puede que le interese leer este artículo aquí. Las empresas no necesitan superhéroes, necesitan sitios web receptivos. ¡Este es el por qué!

Se siguen muchas técnicas al cambiar los diseños. La mejor empresa de diseño web en Chennai utiliza caja flexible, sistema de cuadrícula CSS, etc. para diseñar una página que facilite el diseño receptivo. También puedes seguir estas técnicas. Obtenga más información sobre estas técnicas si aún no lo sabe.

Aquí hay un ejemplo. Tenemos un pequeño menú de navegación aquí.

• Inicio
• Acerca de
• Servicios
• Contacto

Lo diseñé como el siguiente para la versión de escritorio primero.

ul {
color de fondo: # 404040;
tipo-estilo-lista: ninguno;
pantalla: flex;
justify-content: flex-end;
relleno: 0;
}
li {
acolchado: 10px;
estilo de lista: ninguno;
}
una{
fuente: negrita 18px arial;
color: #fff;
decoración de texto: ninguno;
bloqueo de pantalla;
}

Aquí está el resultado.

Ahora he agregado código adicional en el CSS. Aquí está el código:

@media solo pantalla y (ancho máximo: 500 px) {

ul {
pantalla: flex;
dirección flexible: columna;
}
}
@media solo pantalla y (ancho máximo: 500 px) {

}

Esta línea de código se llama consulta de medios y me ayudó a orientar las ventanas del navegador con menos de 500 px. Puede cambiar el valor según sus requisitos. Usted declara su estilo para una pantalla diferente dentro de los corchetes de los medios qyuery.

Vea el resultado después de agregar estas pocas líneas de código. Reduje el ancho de la ventana y listo, los elementos del menú se apilan uno debajo del otro. Así es como se hace un diseño receptivo.

Espero que esto le haya dado una comprensión básica de cómo funciona el diseño receptivo. La mejor práctica es diseñar primero la versión móvil y escalar gradualmente el diseño para pantallas más grandes.

Saludos,

Pavithra Ramesh
Spidergems – Chennai

Todos los días surgen nuevos dispositivos, mientras que las computadoras de escritorio, tabletas y dispositivos móviles siguen siendo las resoluciones de pantalla más específicas para todos los diseños receptivos. Recomiendo simplemente usar una plantilla receptiva lista para su blog de medios digitales. Si no tiene experiencia en CSS y codificación, ¿tiene tiempo y dinero para satisfacer las necesidades de una plantilla que no responde, ajustándola todo el tiempo con la ayuda de un webmaster o desarrollador? Si necesita más detalles sobre la diferencia entre un sitio web adaptable y adaptable a dispositivos móviles, sobre el algoritmo “compatible con dispositivos móviles” de Google y cómo crear un sitio web genial con una plantilla, eche un vistazo a este súper manual, lo encontré realmente útil: ¿Por qué? ¿Es importante tener un sitio web amigable para dispositivos móviles? El | Centro de inicio

Los sitios web receptivos pueden diseñarse de varias maneras.

Para una revisión rápida, le sugiero que use los siguientes fragmentos:

Entonces css será algo así como: –

body {font-size: 1em; float: right; font-family: sans-serif; margin-left: 20%;}

nav {position: fixed; top: 0; left: 0; text-align: center; width: 20%; min-height: 1500px; color: rgba (255,255,255,0.5); color de fondo: # 34495e;}

ul {margen: 5% automático; relleno: 5% 5% 5% 5%; estilo de lista: ninguno;}

li {estilo de lista: ninguno; margen: 5% automático; relleno: 5% 5% 5% 5%;}

a {margen: 5% automático; relleno: 5% 5% 5% 5%; alineación de texto: centro; decoración de texto: ninguna; color: #ccc; font-family: verdana, sans-serif; display: inline-block;}

a: hover {color: #fff;}

a: activo {color: # 093950; }

a un lado {margen: 0 automático; pantalla: bloque en línea; relleno: 2% 2% 2% 2%;}

header {text-align: center; tamaño de fuente: 3em; peso de fuente: negrita; color: # C35817; }

article {text-align: justify; color: # 1f49bf; background: # bcd9ff; padding: 1em 1em 1em 1em; }

sección {fondo: #ccc; color: # 000; relleno: 1%; }

pie de página {font-family: arial, sans-serif; alineación de texto: centro; sombra de texto: 3px 3px 3px #ffffff; color: # 717171; tamaño de fuente: 12px; relleno: 1em 3% 3em 3%;}

encabezado, artículo, sección, pie de página, pre, código, samp, kbd {margin: 0 auto;}

kbd {font-family: monospace, monospace; _font-family: ‘courier new’, monoespacio; tamaño de fuente: 0.75em; color: # C35817; }

código {fondo: #fff; borde: 1px sólido #fff; relleno: 10px 0 10px 2%; bloqueo de pantalla;}

marca {fondo: # ff0; color: # 000; estilo de fuente: cursiva; peso de fuente: negrita; }

#round {-webkit-border-radius: 8px; -moz-border-radius: 8px; radio de borde: 8px; -webkit-box-shadow: #fff 1px 1px 1px;

-moz-box-shadow: #fff 1px 1px 1px; box-shadow: #fff 1px 1px 1px; -webkit-box-shadow: #fff 1px 1px 1px recuadro;

-moz-box-shadow: #fff 1px 1px 1px recuadro; box-shadow: #fff 1px 1px 1px recuadro;}

.grad {fondo: # 4aa6d6; fondo: -webkit-gradient (lineal, 0 0, 0 inferior, desde (# 1f7daa), hasta (# 4aa6d6));

fondo: -webkit-linear-gradient (# 1f7daa, # 4aa6d6); fondo: -moz-linear-gradient (# 1f7daa, # 4aa6d6); fondo: -ms-linear-gradient (# 1f7daa, # 4aa6d6);

fondo: -o-linear-gradient (# 1f7daa, # 4aa6d6); fondo: gradiente lineal (# 1f7daa, # 4aa6d6);}

@media (ancho mínimo: 640 px) {/ * para pantalla móvil vertical * /}

@media (min-width: 960px) {/ * para landscape mobil o tablet * /}

@media (ancho mínimo: 1100px) {/ * para laptop, pc, etc. * /}

Y para ver el código real y conocer algunos consejos, consulte el siguiente enlace: –

Hacer sitio web

* CSS magia y boom! *

De acuerdo, la respuesta no es tan compleja. Debe saber cómo funciona CSS Media Queries, con la ayuda de este puede configurar diferentes estilos para los elementos según el tamaño de la pantalla, el tamaño del dispositivo, el tipo de pantalla y más.

Supongamos que tengo un cuerpo de contenido que quiero tener un ancho del 100% cuando el ancho de la ventana gráfica es inferior a 720 px, la consulta de medios sería la siguiente:

/ * Para todas las condiciones * /
.post-body {
ancho: 60%;
}

/ * Cuando el ancho es 720px o menos * /
@media (ancho mínimo: 720px;) {
.post-body {
ancho: 100%;
}
}

Es por eso que se llama “Responsive”, responde al estado del dispositivo / navegador.

Si no está dispuesto a comenzar desde cero, entonces podría estar interesado en aprender sobre algunos marcos populares de respuesta móvil primero. Mi favorito es Twitter BootStrap

El diseño receptivo para el sitio web se ha convertido en la palabra de moda hoy en día para mantener la tecnología de consistencia. Muchas empresas han aceptado el desafío y han creado soluciones de diseño específicas, especialmente para dispositivos móviles. De acuerdo con su pregunta, me gustaría agregar algunos de los mejores consejos sobre cómo se puede construir un sitio web receptivo y son los siguientes:

Planificación para llenar su objetivo: como la planificación es la principal prioridad.

Supongamos que uno resuelve sus desafíos de diseño en papel, significa que está listo para construir su (s) sitio (s). Hacer una planificación del sitio receptiva es el primer paso.

Primera estrategia móvil:

Este es el hecho por el cual tomamos una estrategia para hacer que nuestro sitio responda, ya que el texto es fácil de leer en el dispositivo móvil, entonces no deberíamos tener ningún problema con la tableta o el escritorio.

Alerta de navegación : si hay más elementos de menú, es posible que desee considerar la creación de un solo icono que se abra en un menú desplegable de menús adicionales.

La otra opción es comprimir el menú en una carpeta como esta

Imágenes : cuando creamos diseños de diseño receptivos, creamos imágenes optimizadas para cada diseño. Y esta es otra forma de hacer que nuestro sitio

Usando Parallax Scrolling: sobre cómo hacer que su sitio responda. Al igual que con muchos elementos de diseño, el efecto puede ser exagerado, por lo que en varios sitios que utilizan bien la técnica.

Limitación al uso de texto en dispositivos móviles: debe usarse lo que es necesario, en lugar de intentar reproducir el sitio de escritorio en un dispositivo móvil.

Aprovechando los estándares de diseño de Google : se notará lo que Google recomienda al diseñar sitios para usar con teléfonos inteligentes. Entre otras cosas, descubriremos qué debemos hacer para que las páginas de su teléfono inteligente se carguen rápidamente.

Diseño puro: a la hora de diseñar el sitio ese Es especialmente importante con un diseño receptivo.

El uso de complementos receptivos es otra forma propicia de hacer que el sitio sea más receptivo si se usa la plataforma WordPress.

Realmente no existe tal cosa como “más receptivo”. Cuando se trata de sitios web, responde o no.

En los términos más simples, todo el bombo detrás de la capacidad de respuesta solo significa que su sitio web mide la ventana gráfica (la pantalla donde se está viendo) y muestra una versión de su contenido optimizada para mostrarse bien a esa resolución o por debajo de esa resolución.

Esto casi siempre se logra mediante el uso de consultas de medios y diseños CSS progresivos, posiblemente junto con algunas imágenes optimizadas de ancho de banda. Si su sitio web actual no responde y usted es un desarrollador web, entonces debe buscar en Google el diseño receptivo y las consultas de medios y descubrir la mejor manera de rehacer su CSS y si es un propietario del sitio web que no entiende mucho acerca de la codificación para en la web, entonces debe encontrar un profesional que entienda el diseño receptivo. No se deje engañar por los desarrolladores que tienen un sitio de WordPress como su propio sitio / cartera, esto generalmente indica que no están muy versados ​​en escribir código. Incluso si su sitio web responde, probablemente se basó en el trabajo de otros, por lo que no sabrán cómo hacer que su sitio responda a menos que también tenga un sitio de WordPress.