CSS para móviles

7/mar/2006 17

Un gran mercado que en Chile está despegando, lentamente dado en parte por el alto costo de la tecnología y los teléfonos móviles que la soportan, es el del webdesign para móviles. En general, del diseño de multimedios orientado para dispositivos móviles: teléfonos, PDA’s, etc. Por ello, es imprescindible que los diseñadores sepan que existe esta posibilidad, que está abierta a ser utilizada y que no es nada del otro mundo implementarla. Si ya tienes tu sitio tableless, es cosa de ‘esconder’ algunos div‘s para que no sean desplegados, y formatar algunos espacios para el ancho de pantalla del móvil.

Tamaños de pantallas:

Aquí comienzan los problemas. Claro, nada es perfecto. La mayoría de las pantallas son verticales; las menos apaisadas, y menos aún las que puedes escoger entre ellas. El tamaño más común hoy en dia corresponden a 176 x 208px. Algunos más antigos tienden al cuadrado (128 x 128px y 120 x 144px). PDA’s usualmente usan VGA (480 x 640px). Otros tamaños comunes son de 200 x 640px y 320 x 640px.

Peso de imágenes:

La mayoría de los móviles no soportan millones de colores, como las pantallas. así que usar GIF en 32 colores, bien manejados, será suficiente. Simplificar al máximo los tonos utilizados será importante, ya que la pequeña pantalla y las condiciones en que el sitio será visto (en oscuro, a contraluz, caminando, acostado, etc.) no serán las mismas que en un computador, donde lo que se pretende es tener la mejor orientación posible del monitor.

Browsers:

Opera lleva la delantera. Sus browsers v7 han destacado por su simplicidad, y se presentan con gran cobertura en sus diferentes soportes: Symbian, Windows CE. Además, tiene buen soporte y renderizado de CSS 2.

Adaptando tu sitio:

Tan fácil como crear una nueva hoja de estilos. Aquí, deberás simplificar el contenido, mostrando sólo lo importante y esencial que quieres que el usuario vea. Nada de parafernalia. Importante es darle la propiedad al HTML que pertenezca a esta nueva hoja de estilo. A continuación:

Screen: para desktops

 <link rel=”stylesheet” type=”text/css” href=”pantalla.css” media=”screen” />

HandHelds: para celulares, PDA´s, etc

 <link rel=”stylesheet” type=”text/css” href=”moviles.css” media=”handheld” />

display: none; es lo que usarás para ocultar div, p o lo que sea necesario. Mejor dicho, no necesario. Por ejemplo:

#super_imagen {
display: none;
}

No necesitamos que una imagen gigante se van en nuestro celular. No lo queremos tampoco.

width: 240px; será necesario formatear el ancho al deseado. max-width: 208px; también es importante, ya que permite que la columna o el contenedor no se pase de ese ancho.

body {
     max-width: 208px;
}

Probándolo:

No necesitas utilizar un celular para ello. Opera trae una opción llamada Small Screen, donde te permite visualizar tu sitio con el media="handheld". Muy útil.

Links:

Comentarios

  1. Dennis [#]

    Como puedo poner en mi hoja de estilo CSS, para que los lincks abran en una nueva hoja ?

  2. Administrador [#]

    usa javascript, si ya no quieres usar target=”_blank”

  3. Criss [#]

    Hace unos dias me entro la duda con respecto a eso.
    ya que descubri que mi celular tiene servicio de wap.. y puedo ver fotografias de las camaras de santiago y contarme alguna web…
    pero todavia no he podido ver alguna…
    me interesa mucho el tema..
    ojala avance..
    gracias por la web
    cariños
    criss

  4. CSSLab Admin [#]

    si espero ahondar mas en el tema, afuera se viene el boom de la web celular, aca en chile aun es minima pero tb va a explotar luego. es bueno estar preparados.

  5. CSS Lab » El porqué de no utilizar tablas [#]

    […] no hacen el sitio accesible para, por ejemplo, móviles, PDA’s y menos aún discapacitados visuales. […]

  6. CSSLab » Diseño para móviles: referencia [#]

    […] Un gran medio aún por ser explotado en latinoamérica (y que creo que lo será durante este año 2007) es el de la internet para dispositivos móviles. Aunque ya hice un acercamiento en el artículo CSS para móviles, navegando por mis RSS encuentro un link donde Brian Fling se toma la molestia de escribir un manual para diseño web para móviles. Increíble, aplaudo su iniciativa. […]

  7. Joaquin [#]

    Estoy creando un sitio wap para un diario de Argentina, y la info esta me sivió mucho.

    gracias!

  8. Simcronos [#]

    Muy bueno el articulo, me ha ayudado mucho con mi proyecto…
    Gracias, Saludos…

  9. » Pronto… | CSSLab [#]

    […] CSS para móviles […]

  10. Tuti [#]

    Hola, encuentro sumamente interesante tu post. Actualmente estoy viendo la posibilidad para hacer una pag. web para celular para un trabajo.

    Quisiera saber si podrías renovar los links, que ya están viejos.

    Gracias :)

  11. CSSLab » Desarrollos Web para iPhone [#]

    […] Safari, tal como una hoja de estilos media="handheld" es leída sólo por dispositivos móviles; ya iPhone no lo interpreta, utiliza por defecto la hoja de estilos principales (sea […]

  12. Pablo [#]

    Hola, m gustaria saber el alcance de javascript para los dispositivos moviles, m parece muy interesante el diseño para dispositivos mviles, y quisiera saber sobre los alcanzes y limitaciones de estos, si aguanta jquery para algo cm validaciones de forms o bien saber mas de los moviles y la interaccion con el usuario… tnx!!

  13. gero [#]

    Sos un boludo, gracias me sirvio el tip, con respecto a los links aca se los dejo para que descarguen el Opera http://www.opera.com/

  14. click [#]

    COOL !!!

  15. Carlos Gutierrez [#]

    Y el Small Screen donde localizo, da un poco mas de detalle si no es mucho pedir!!

  16. Tip Precoz 2: combinando @media | CSSLab | Laboratorio de ideas web [#]

    […] el soporte al cual apunta la hoja de estilos definida: pantalla (screen), papel (print), móviles (handheld), etc. Algunas propiedades CSS están diseñadas para medios específicos […]

  17. ElJoho [#]

    Hola, estoy aprendiendo y quisiera saber si el efecto que tienen sobre su menú cuando pasa la parte de la pantalla inicial y cambia de color lo hacen con javascript o hay alguna forma en especial para css?, agradecería muchísimo su respuesta.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab