Diseño web para moviles

Pach, yo la solución que encontré a ese problema fue usando la etiqueta <META> que comentas, pero añadiendo algo más:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
De esa manera siempre se muestra al 100%, y se desactiva la posibilidad de jugar con el zoom.

Muchas gracias!!

Perfecto, ahora se me ven ambas al mismo tamaño.

Principalmente he visto que la resolucíon a la que se suelen poner las webs para moviles es 320px de ancho!! Lo unico es que yo lo estoy viendo en un galaxy S y se me queda un poco grande a este ancho...mi pregunta es: ajustas el ancho a según qué dispositivo o lo haces a un ancho fijo??

Pach, yo todas las pruebas que he hecho han sido con diseños líquidos, esto es, que se adaptan al tamaño de la pantalla.

Para la gente que hace más versiones, 320px y 480px suelen ser las más comunes (smartphone en vertical u horizontal). Aunque claro, hay más móviles además de los smartphones, o el iPhone4 por ejemplo que tiene una resolución de 640px de ancho por 960px de alto (o ancho en horizontal).

Lo más práctico es hacer una versión en una sola columna, de ancho líquido, para todas las versiones para móvil. Pero claro, eso dependiendo de la complejidad de la web, pues tendrás que buscarte la manera, con porcentajes, adaptando el tamaño de las imágenes, etc. Aunque para cosas como botones y demás, con imágenes de fondo y las media queries es bastante sencillo.

Si quieres inspiración (o ver cómo han solucionado otros el tema) tienes Media Queri.es que es una galería de webs que usan precisamente las media queries para adaptar el diseño. Como verás hay de todo, desde gente que crea varias versiones cada una con sus particularidades, a diseños que varían en muy poco y simplemente se adaptan en tamaño.

Ah, perfecto!!

El principal problema que tenía es que mi web va a tener 2 portfolios, uno de trabajos y otro de fotografias con muchas imágenes y no quería tener todas las imágenes en distintas resoluciones porque sino pesaría demasiado!!

Gracias Fran!!

Pach, sobre lo que comentas de las imágenes, es una de las cosas importantes, porque igual que puedes reescalar con CSS las imágenes, tampoco es muy práctico tener imágenes super grandes para descargarlas en la versión para móvil. Una de las opciones al respecto es tener varios tamaños de imagen y cambiarlos según la resolución, por ejemplo con javascript, como hace Andy Chung en su portfolio, o al menos tener un par de versiones: una para móviles (de 480px) y otra más grande para tablets y superiores.

Pero vamos, ésto más que nada por ahorrar ancho de banda si accedes desde un móvil, aunque también dependerá de la navegación. Si por ejemplo se muestra una miniatura de todos los trabajos y solo cargas la imagen completa de los que eliges ver, pues igual te puedes permitir que sea más grande porque no las cargas todas por defecto.

Si, eso estoy haciendo yo...trabajo con dos tamaños...aún así me está resultando un pelín complicado que quede bien.

Algo que, por cierto, acabo de notar es que con la web normal uso las google fonts y me va perfecto pero en la version para móviles, digamos que me ignora brutalmente...

Pero bueno...ahi andaremos haciendo pruebas y más pruebas...

Si no te importa Fran te haré otra pregunta....

Estoy probando el diseño en el opera Mini y al apaisar el móvil, en horizontal, el navegador me hace un zoom en la página y las imágenes me las pixela.

He visto otras webs en las que al apaisar el movil no las pixela pero tampoco las carga de nuevo con otra resolución...por lo que parece que hiciera como una especie de reescalado de imágenes. El caso es que he estado buscando por ahí y no encuentro nada...tu sabes algo??

Olvídalo!! solucionado!! jeje!!