SleepStreet

De Casiopea





Caso de Estudio
NombreSleepstreet
Período2013-2013
Palabras ClaveResponsive Design
Estudiado enGráfica Digital 2013
Estudiado porNathaly Sepúlveda
URLhttp://www.sleepstreet.be/


Presentación del sitio Sleepstreet

El caso de estudio consiste en analizar y estudiar el sitio http://www.sleepstreet.be/ en su versión Responsive Desing, para pc, tablet y móvil. La importancia de realizar dicha labor es ir observando los cambios que van ocurriendo y como se desenvuelve el sitio web.

Sobre el sitio web

Es un servicio de alojamiento que ofrece cuatro tipos de departamentos en Gante, Bélgica. Los cuales poseen una identidad característica que ellos mismos - sus dueños - reconocen que les agrada y a lo largo del sitio se puede apreciar como tomo identidad este gusto.

"Siéntete como en casa en uno de nuestros 4 apartamentos, cada uno de ellos con un ambiente único."


Estudio y análisis

Home Sleepstreet

Para comenzar dentro del estudio de todo lo que tiene que ver con el sitio web Sleepstreet. Como primeros estudios se había analizados principalmente reduciendo manualmente el tamaño de la pantalla del navegador, no tomando estándares ya que estos ayudarían a mostrar más drástico los cambios que suceden dentro de todo el sitio.


Homesto.png


TAMAÑOS EN PIXELES

1. 1349 x 1359 px

2. 922 x 1131 px

3. 782 x 1435 px

4. 354 x 1833 px


Barra ejemploz.png


Ejemplo del cambio de tamaño de cada barra de navegación.

Cambio de columnas en grilla

Columnassitioresonsive.png

Al mirar los cuatro casos presentados en esta parte se puede apreciar que el mayor cambio sufrido dentro del sitio lo tienen los tamaños de las imágenes y la reducción de columnas dentro de la grilla del sitio. Haciendo que las imágenes se acomoden dentro de las nuevas grillas y permitiendo que la lecturabilidad, visibilidad y estética del sitio este cumplida en un rango mínimo.

Este es uno de los cambios estructurales más notorios dentro del sitio web, ya que en cada paso y cambio de tamaño de pantalla que se hace, la tipografía sigue del mismo tamaño.

Sectorimagenes.png

Barras de navegación

La barra de navegación el cambio que presenta más que nada es de estructura, se comienza a condesar los distintos temas expuestos y la barra en parte se va agrandando, como se puede presenciar en el último ejemplo.


900px

Tamaño real 1.349×49 px


800px

Tamaño real 921×49 px


600px

Tamaño real 782×49 px


Archivo:Barranavegaciónsleepstreet4.png

Tamaño real 354×109 px


Barramovil en movil.png

Tamaño real 320x104 px


*El tamaño visualizado en la wiki no es el real, la imagen (1) esta a 900 px, la (2) a 800 px, la (3) a 600 px y la (4 y 5 ) su visualización es real. Todos estos rangos de pixéles son los otorgados por la wiki casiopea

Footer

El Footer, o pie del sitio no posee mayor cambio que el de la compresión del, pero en ningún momento altera la tipografía o cambia el justificado de la información entregada.

Inferiorsleepstreet.png

Tamaño real del corte 1.349 × 56 px


Inferiorsleepstreet2.png

Tamaño real del corte 921 × 48 px


Inferiorsleepstreet3.png


Inferiorsleepstreet4.png

Tamaño real del corte 354 × 44 px


*El tamaño visualizado en la wiki no es el real, la imagen (1) esta a 900 px, la (2) a 800 px, la (3) a 600 px y la (4) su visualización es real. Todos estos rangos de pixéles son los otorgados por la wiki casiopea


Tipografías

En el sitio web no ocurren cambios tipográficos que afecten al entendimiento de la información entregada. Los títulos, textos, color de ellos siempre se conservan.

font-family: "helvetica,"helvetica neue",arial,verdana,sans-serif;

text-transform: uppercase

color: #504a19

font-size: 16px

font-weight:normal

margin-bottom: .3em

Fondo

Cuando nos desplazamos dentro del sitio web, y comenzamos a dialogar con el - llámese dialogar cuando apretamos algo para averiguar algo más - pues este nos comienza a mostrar sutilmente cambios, sin ni siquiera haber hecho algún cambio en el tamaño de la pantalla, hablo del fondo del sitio.

Este a medida que estamos dentro del nos va presentando distintos tipos de fondos.

Trozosleepstreet (1).png Trozosleepstreet (3).png

Trozosleepstreet (4).png Trozosleepstreet (2).png

Trozosleepstreet (5).png


Grilla

web

Estamos viendo el Home del sitio web en un tamaño de 1349x1359 px

Homesleepstreet.png


Grillaunohomeweb.png


Grilladoshomeweb.png

Móvil

En el último tiempo se ha comenzado a incrementar mucho más lo que son los sitios web responsive, y por ende los sitios web móviles. Cosa que viene al caso, pues es fácil de mirar todo lo que se está mostrando

Movil en movil.png

Tamaño de 320x1719 px


Comparación del sitio extraído por web tamaño móvil y el tamaño pantalla móvil desde el samsung galaxy mini 2

Sitiomovil.png

Conclusiones

Recopilando todo lo registrado se puede llegar a la conclusión, de que para el sitio responsive es importante nunca privar de la información total que ya se presenta anteriormente - teniendo en cuenta de que se visita primero el sitio web en pc- por ello se crea la forma de que toda la información este de una manera acorde dependiendo del dispositivo que se este utilizando para su visita.

La estructura en este caso no cambia demasiado más allá de que sus columnas se disminuyan y la información se ordena nuevamente acorde a eso. Lo importante y fundamental en estos casos - de sitios responsive- es que nunca se pierda la identidad y personalidad del sitio en cuestión.

Algunas de las debilidades del sitio web es que cuando desde el pc se esta visitando y se reduce su tamaño de pantalla a uno menor como el móvil, pues la barra de navegación se pierde en su diagramación y se mezcla construyendo algo totalmente nuevo. Cosa que no sucede si se visita el sitio por un dispositivo móvil- celular- puesto que ya esta todo determinado acorde al tamaño de pantalla, pero ojo, cuando se hizo el ejercicio en pc el tamaño de pantalla era igual al de móvil 320x480 px. Lo cual lleva a pensar que aún en su totalidad no tiene todo resulto.