L'esquema bàsic d'un lloc optimitzat per a telèfons intel ligents

Si la web que estem acostumats a gaudir de nosaltres mateixos amb la combinació infinita de disseny i l'espai, el disseny de pàgines web per a telèfons intel ligents de revisar les nostres ambicions creatives, o almenys canviar la mida la mida limitat de la mostra destinada a la visualització del nostre treball.

Nota: la resolució de vídeo varia, és clar, depenent del model, la majoria dels telèfons intel ligents de pròxima generació té una pantalla amb un ample que van des d'un mínim de 240 a un màxim de 480 píxels. La resolució més comú pot comptar, de cap manera vertical, amb una amplada de 320 píxels.

Oblideu-vos de disseny continuació les columnes dos, tres o quatre! Des del meu punt de vista, l'única solució possible per tal de garantir la bona usabilitat al contingut, és el disseny d'una sola columna, on s'organitza tot el contingut al llarg d'una cascada d'ordre vertical (és a dir, un sota l'altre). Quan es crea una pàgina web, recorda sempre, el més important és assegurar la bona usabilitat i, més encara quan la pantalla està limitada a un telèfon intel ligent, la senzillesa és sempre el millor camí a seguir.

Com pot veure, la nostra estructura és molt simple i consisteix inicialment en tres parts:

• Capçalera: és la part superior de la pàgina i està dissenyat per a acomodar el logo del lloc i possiblement alguns altres elements de la primera planta;
• Cos de la pàgina: està dissenyat per donar cabuda a la part central del contingut real de les pàgines del nostre lloc web;
• Peu de pàgina: Aquesta és la part final, a la part inferior, on el més habitual és posar els crèdits, referències legals, els avisos de copyright, contactes, etc.

El menú de navegació

La part central de la pàgina, al seu torn, s'utilitzarà a la casa d'altres àrees (que varien depenent de les seves necessitats).
Un element essencial, és clar, és el menú de navegació a través del qual accedir a altres pàgines / les àrees del lloc. Si són pocs (primera solució) es pot crear una barra d'eines amb els enllaços necessaris, en cas contrari - per raons d'espai - que és millor afegir un sol botó que, quan es fa clic, es mostra una llista de totes les pàgines / àrees disponibles (segona solució).

El contingut

També, i sobretot, pel contingut que necessita tenir en compte la petita pantalla del seu telèfon intel ligent. Una vegada més, per tant, la simplicitat i linealitat són, al meu entendre, la millor opció.

Evitar innecessaris adorns gràfics és una bona regla de disseny web i és encara més en el desenvolupament de pàgines web per a dispositius mòbils i per les qüestions relacionades amb la petita grandària de la pantalla i per raons relacionades amb l'ample de banda disponible (a més de tenir un cost, L'ample de banda 3G no sempre és ràpid així que el millor és centrar-se en l'essencial).

Fins i tot dels continguts, per tant, suggereixen una cascada on els elements de disseny diferents (text, imatges, vídeo) en un seguiment entre si:

En la propera lliçó veurem com crear el codi HTML a la nostra pàgina web a partir, per descomptat, pel head (títol, meta tags i CSS).

• <<Lliçó anterior
• Índex de l'ajuda
• Lliçó següent>>