CSS para móviles

7/Mar/2006 8028

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. legitimate mexican pharmacy online [#]

    stromectol http://stromectolforte.com/# ivermectin cena stromektolu

  2. Maryblabs [#]

    where to get sildenafil

  3. generic stromectol [#]

    ivermectin https://stromectolforte.com/ ivermectin tablets for humans ivermectin for humans amazon

  4. Htbnquiet [#]

    sketch viagra torte herbal viagra melbourne

  5. CntfWeway [#]

    ultimate v viagra herbal comprar viagra en valencia sin receta

  6. ivermectin 12 mg [#]

    Global Dope Here this outcome
    https://stromectolivermect.com stromectol
    https://ivermectinsts.com ivermectin for humans
    https://ivermectinst.com ivermectin for sale humans
    https://ivermectinstrom.com ivermectin over the counter
    https://ivermectinsts.com ivermectin for sale

  7. pendik evden eve nakliyat [#]

    pendiқ evden eve nakliyatt

    Evden eve nakliyat Pendik bölgeѕinde bulսnan en köklü ve kaliteli
    nakliyat şirketleri. Kuşaklardan beri eşya taşıma işlemleгinde
    size destek ѕağlıyoruz. Sizde kaliteli bir taşıma istiyorsunuz hemen bize yazabilirsiniz.

    pendik evden eve nakliyat

  8. Maryblabs [#]

    where to buy viagra uk

  9. ivermectin 12 mg [#]

    General Dope Here this by-product
    https://ivermectinstrom.com ivermectin human tablets
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin tablets
    https://ivermectstromect.com ivermectin tablets

  10. ivermectin 6 mg [#]

    General Low-down Far this outcome
    https://ivermectinst.com ivermectin tablets
    https://ivermectinsts.com ivermectin for human tablets
    https://ivermectinsts.com ivermectin over the counter
    https://ivermectinst.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin for sale

  11. ivermectin 12 mg [#]

    General Dope Fro this product
    https://ivermectinst.com ivermectin over the counter
    https://ivermectinst.com ivermectin for humans
    https://ivermectinst.com 3 mg ivermectine over counter
    https://ivermectinsts.com ivermectin for human tablets
    https://stromectolivermect.com ivermectin over the counter

  12. ivermectin tablets for humans for sale [#]

    Non-specific Information About this offshoot
    https://ivermectstromect.com ivermectin for sale
    https://stromectolivermect.com ivermectin for sale
    https://ivermectstromect.com stromectol
    https://ivermectinst.com ivermectin 12 mg tablet for sale
    https://ivermectinst.com ivermectin tablets for sale

  13. ivermectin 6 mg [#]

    Global Dope Fro this outcome
    https://ivermectstromect.com stromectol
    https://ivermectinsts.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin for humans
    https://ivermectinst.com ivermectin for sale
    https://ivermectinst.com ivermectin tablets

  14. stromectol [#]

    General Information Far this offshoot
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectinst.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin for humans
    https://ivermectinstrom.com ivermectin tablets
    https://ivermectinstrom.com ivermectin for sale

  15. GustavoVet [#]

    dissertations online
    proofreading services

  16. ivermectin human tablets [#]

    Accustomed Message Fro this by-product
    https://ivermectinstrom.com ivermectin tablets
    https://ivermectstromect.com ivermectin 12 mg
    https://stromectolivermect.com ivermectin tablets
    https://ivermectstromect.com ivermectin over the counter
    https://ivermectinsts.com ivermectin 3 mg

  17. Teoblabs [#]

    cheap tadalafil 20 mg canada

  18. ivermectin for sale [#]

    Global Message About this offshoot
    https://ivermectstromect.com ivermectin tablets
    https://ivermectinstrom.com ivermectin 6 mg
    https://stromectolivermect.com ivermectin 6 mg
    https://stromectolivermect.com ivermectin for humans
    https://stromectolivermect.com ivermectin 6 mg

  19. ivermectin for sale [#]

    Accustomed Dope Far this product
    https://ivermectstromect.com ivermectin over the counter
    https://stromectolivermect.com ivermectin for human tablets
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectinstrom.com stromectol
    https://ivermectstromect.com ivermectin for sale

  20. stromectol [#]

    General Low-down Fro this outcome
    https://ivermectstromect.com ivermectin over the counter
    https://ivermectinstrom.com ivermectin tablets for humans
    https://ivermectinst.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin for sale

  21. cialis tablets [#]

    cialis coupon https://cialiswithdapoxetine.com/

  22. stromectol [#]

    Accustomed Low-down Fro this by-product
    https://ivermectinsts.com ivermectin over the counter
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectinst.com stromectol
    https://ivermectinst.com stromectol
    https://ivermectinst.com 12 mg ivermectin for sale

  23. Tedblabs [#]

    buying viagra canada safely

  24. ivermecton.com [#]

    stromectol 3 mg dosage https://www.stromectoloff.com/ ivermectin for humans for sale

  25. ivermectin 12 mg [#]

    Global Message Far this by-product
    https://ivermectstromect.com ivermectin tablets for humans
    https://ivermectinsts.com ivermectin over the counter
    https://ivermectinstrom.com ivermectin for humans
    https://stromectolivermect.com ivermectin for humans
    https://ivermectstromect.com ivermectin 3 mg

  26. ivermectin 12 mg [#]

    Non-specific Information Fro this by-product
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectinst.com ivermectin over the counter
    https://ivermectinsts.com ivermectin 12 mg
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinstrom.com ivermectin 6 mg

  27. ivermectin for sale [#]

    Non-specific Low-down Fro this by-product
    https://ivermectstromect.com ivermectin for humans
    https://ivermectinstrom.com ivermectin tablets
    https://ivermectinst.com ivermectin tablets
    https://ivermectinstrom.com ivermectin tablets for humans
    https://ivermectstromect.com ivermectin 3 mg

  28. stromectolforte.com [#]

    ivermectin for humans for sale http://stromectolforte.com/ ivermectin buy ivermectin nz

CSSLab