it-swarm-es.com

Un sitio web para múltiples resoluciones de clientes

Sigo pensando que aunque crear un solo sitio web para múltiples resoluciones de clientes o tamaños de pantalla puede ser un trabajo duro, es mucho más fácil de mantener que crear un sitio web separado para cada dispositivo o resolución.

¿Qué aplicaciones de diseño o edición de sitios web, si hay alguna, puedo usar para ayudar a crear CSS específico o incluso marcar para dispositivos de destino de un tamaño determinado?

6
Bernhard Hofmann

Dreamweaver CS5 tiene soporte para consultas de medios HTML 5, lo que le permite utilizar css específicos y previsualizar por resolución de pantalla. Es lo único que me viene a la mente, pero nunca me ha gustado Dreamweaver y no lo recomendaría.

2
fluxd

Un sitio web único para múltiples clientes es ciertamente más fácil de mantener.

Lo primero que debe hacer es tener múltiples archivos CSS que el navegador recogerá de acuerdo con el atributo media :

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

Puede adaptar el diseño de los elementos, su tamaño e incluso ocultar algunos de ellos para dispositivos más pequeños.

Si grandes partes de su diseño tienen que ser eliminadas en dispositivos pequeños, es mejor eliminarlas en el servidor para ahorrar algo de ancho de banda.

La resolución de la pantalla y el tamaño de la ventana se pueden determinar en el cliente en Javascript (esta es la prueba más confiable screen.width/screen.height y document.body.clientWidth/document.body.clientHeight), mientras que en el servidor tiene que confiar principalmente en el HTTP_USER_AGENT header (pruébelo aquí junto con otros encabezados).

Otra técnica importante es abandonar el uso de tablas HTML para el diseño de página a favor de bloques flotantes , que se adaptan mejor a diferentes resoluciones de pantalla o redimensionamiento de ventanas.

Cuide también el tamaño real de la pantalla, ya que los dispositivos pequeños tienden a tener una resolución mucho mayor (DPI, puntos por pulgada) que pueden hacer que las cosas sean ilegibles.

Ambas técnicas deben combinarse (cliente y servidor) para obtener los mejores resultados. El ejemplo de Diseño web receptivo es impresionante, pero realmente tienes que dominar las técnicas para lograr esto, y todavía hay limitaciones.

Creo que esta pregunta, incluso si se hace debido a los nuevos dispositivos móviles conectados, incluso debe considerarse para la computadora, ya que el usuario puede cambiar el tamaño de la ventana del navegador.

5
Mart

Esta es una presentación imperdible, que cubre un déficit de la forma en que muchos usan las consultas de medios: Repensando la Web Móvil .

En pocas palabras, los teléfonos móviles que no admiten consultas de medios (y hay muchos de esos) pueden terminar con un estilo destinado a los navegadores de escritorio. El enfoque recomendado aquí, y utilizado por mí mismo, comienza con estilos básicos para todos y luego agrega estilos progresivamente para navegadores que admiten consultas de medios.

Ver mi respuesta a una pregunta relacionada en Stack Overflow .

3
David Oliver

Solo CSS no funcionará para eso, porque puede tener un diseño muy diferente para la interfaz de usuario móvil y para PC/Mac. Una pequeña idea radica en el diseño del lado del servidor. Por ejemplo, debe representar alguna parte de la página (cuadrícula de datos, barra lateral, barra de navegación, etc.). Por ejemplo, usa ASP.NET como procesador del lado del servidor. Luego, en el diseño de su página, escriba:

Para la barra de navegación:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

Para la cuadrícula de datos:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Luego en codebehind:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

y así.

Luego debe escribir diferentes renderizadores para diferentes resoluciones (móvil/etc ...). * Para una gran resolución, puede representar encabezados ordenables, buscadores, filtros, clasificadores, contenido desplazable, complementos de JQuery, etc. * Para una resolución pequeña, solo representa un html simple.

Espero que la idea principal sea clara.

0
Genius

No necesita múltiples "sitios web" para diferentes clientes (no creo que nadie lo haga), pero debe tener múltiples portales para diferentes segmentos de visitantes, por ejemplo: computadora de escritorio/portátil, netbook/ipad/teléfonos inteligentes y otros móvil.

Si bien CSS le permite especificar diferentes hojas de estilo para diferentes tipos de dispositivos, esto es problemático en la práctica. Muchos teléfonos inteligentes no toman la hoja de estilo móvil o usan tanto la hoja de estilo móvil como la hoja de estilo de la pantalla.

En segundo lugar, sus diferentes segmentos de audiencia buscarán información diferente. Por ejemplo, un usuario móvil probablemente no estará interesado en leer artículos largos o ver imágenes o videos de alta resolución. Por lo tanto, un portal separado con una experiencia de usuario específica sería óptimo, y es por eso que los servicios más populares ofrecen portales separados para usuarios móviles.

En tercer lugar, la mantenibilidad se trata de organización y simplicidad más que de cantidad. Claro, podría tener una sola hoja de estilo grande usando muchos hacks en cascada y hacks de navegador para calzar su sitio principal en todos los clientes. Pero es probable que sea más difícil de mantener que mantener 2-3 hojas de estilo más simples, cada una adaptada a una clase particular de clientes.

Por último, si su aplicación está modularizada adecuadamente utilizando el aislamiento de dominio y diseñada con separación de preocupaciones, entonces debería ser bastante fácil configurar nuevos portales personalizados para diferentes clases de dispositivos. Si está utilizando un patrón MVC, entonces todo lo que necesita hacer es agregar nuevas vistas y continuar utilizando los mismos modelos y controladores. Si está diseñando una aplicación AJAX), incluso puede reutilizar la mayoría de las vistas creando servicios web.

0
Lèse majesté

Dependería de su contenido, pero podría modularizar su contenido.

Cada elemento de contenido podría mostrarse en un módulo estrecho que podría mostrarse en tres columnas en una pantalla panorámica, para resoluciones más bajas podría usar menos columnas.

Un buen ejemplo de esto es: http://colly.com/ Hay tres ajustes de diseño a medida que disminuye el ancho de la página. Utilizando esto como una guía para su propio sitio, puede diseñar un módulo y un diseño de página con 3 variaciones para satisfacer cada uno de estos anchos.

Para implementar esto, podría tener módulos de tamaño fijo (tal vez como li) dentro de un contenedor que ajusta el tamaño. Puede ajustar el tamaño de los contenedores usando jquery para detectar el ancho de la pantalla (y el cambio de ancho) y luego agregar/eliminar clase. Puede crear variaciones en los elementos del contenedor, por ejemplo: ul.product_list li y ul.product_list_wide li

0
Leah

Como otros han dicho, usaría consultas de medios CSS3 para apuntar a múltiples resoluciones. Dependiendo de su sitio/aplicación, esto puede no ser posible. Esto supone que va a utilizar el mismo contenido para todas las experiencias, simplemente mostrándolo de manera diferente según el tamaño de la pantalla (esto no siempre es óptimo para una experiencia móvil).

Algunos recursos para usar esta técnica serían:

Un artículo de List Apart sobre diseño web receptivo: http://www.alistapart.com/articles/responsive-web-design/

Repensar el uso compartido de la Web móvil: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

JavaScript para habilitar consultas de medios CSS3 para navegadores que no lo admiten de forma nativa: http://code.google.com/p/css3-mediaqueries-js/

Una selección de consultas de medios para diferentes dispositivos y tamaños: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Algunos otros ejemplos: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- sitio web /

Desafortunadamente, no hay un WYSIWYG para hacer este tipo de cosas: necesita el conocimiento y la habilidad para poder implementar esto a mano.

Aunque sugeriría en contra de ellos, existen servicios como Mobify si solo le preocupan las vistas de escritorio/móviles. http://mobify.me/

0
RussellUresti