EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Test de conocimientos css
            Comprueba tu conocimiento sobre CSS en este test
            13/10/2019
            Medios en CSS
            Medios en CSS
            19/10/2019

            Tipos de diseño web ¿cuál utilizo?

            tipos de diseño web

            tipos de diseño web

            Tabla de contenidos

            • Tipos de diseño web, ¿cuál utilizo?
            • 1. Diseño fijo
            • 2. Diseño elástico
            • 3. Diseño líquido o fluido
            • 4. Diseño web responsivo o adaptable
            • 5. Diseño flexible
            • 6. ¿Qué tipo de diseño debo utilizar?

            Tipos de diseño web, ¿cuál utilizo?

            A la hora de crear una interfaz web existen diferentes tipos de diseño: diseño con tamaño fijo, diseño con unidades «em», diseño mediante porcentajes, diseño que se adapta mediante puntos de ruptura o diseño definido dentro de unos márgenes predefinidos. Es importante mencionar que  estos métodos se pueden utilizar de forma combinada. Veamos cada uno de estos métodos mediante un ejemplo.

            1. Diseño fijo

            El diseño fijo dispone de medidas fijas que no son modificadas para los distintos dispositivos. Por lo tanto, se trata de un diseño que no cumple las normas de un diseño web responsivo o responsive web design.

            0

            2. Diseño elástico

            En el diseño elástico se definen las dimensiones de la página con unidades «em». De esta forma el diseño se adaptará cuando el visitante del sitio cambie el tamaño del texto, pero no se adaptará en función de los cambios de tamaño de la ventana del navegador.

            Tal y como vimos en el apartado “Unidades de medida en CSS” de la unidad 3, el «em» es una unidad relativa y su valor depende del tamaño de fuente definido en el navegador.

            El «em» es una unidad de tipografía que mide exactamente el ancho de la letra «M» mayúscula de una tipografía dada y a un tamaño dado. Por tanto, un «em» no mide siempre lo mismo. Actualmente, el tamaño de fuente por defecto en todos los navegadores suele ser de 16 píxeles.

            0

            3. Diseño líquido o fluido

            El diseño líquido se adapta a la ventana del dispositivo, normalmente definiendo los tamaños mediante porcentajes. Sin embargo, este método perjudica la experiencia de usuario y no permite controlar el diseño ( el diseño varía constantemente según el tamaño del dispositivo y no se puede diseñar al píxel para todos los tamaños).

            0

            4. Diseño web responsivo o adaptable

            El diseño web responsivo o responsive web design (también llamado adaptable o adaptative) se basa en el uso de media queries. Gracias a esta técnica podemos definir estilos condicionales con puntos de ruptura o puntos de interrupción, aplicables únicamente en determinadas situaciones.

            Supongamos que queremos aplicar un estilo diferente en pantallas de ancho superior a 1200px, inferior a 1200px, e inferior a 600px, tendríamos las siguientes media queries para definir los estilos del ejemplo que hemos estado viendo:

            0

            5. Diseño flexible

            Consiste en utilizar las propiedades CSS «min-width» y «max-width» para que las anchuras de los bloques puedan adaptarse dentro de unos mínimos y máximos.

            0

            6. ¿Qué tipo de diseño debo utilizar?

            Crear un sitio web adaptable exige, en muchos casos, combinar algunas de las técnicas anteriores. Lo más habitual es declarar más de una media query para adaptar el diseño a múltiples dispositivos. Pero el número de puntos de interrupción y cómo se implementan estas técnicas depende del diseño específico del sitio web.

            Así pues, lo ideal es utilizar un diseño web responsivo, preferentemente no elástico y con mezcla de diseño flexible y líquido según el contenedor. De este modo ofreceremos la mejor experiencia de usuario y podremos considerar las distintas medidas de los dispositivos utilizando tan solo HTML y CSS.

            Comprueba tu aprendizaje

            El diseño fijo...

            ¡Bien! ¡Has fallado!

            El diseño web responsivo o adaptable...

            ¡Bien! ¡Has fallado!

            El diseño líquido o fluido...

            ¡Bien! ¡Has fallado!

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results