SleepStreet
| Caso de Estudio | |
| Nombre | Sleepstreet |
|---|---|
| Período | 2013-2013 |
| Palabras Clave | Responsive Design |
| Estudiado en | Gráfica Digital 2013 |
| Estudiado por | Nathaly Sepúlveda |
| URL | http://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.
TAMAÑOS EN PIXELES
1. 1349 x 1359 px
2. 922 x 1131 px
3. 782 x 1435 px
4. 354 x 1833 px
Ejemplo del cambio de tamaño de cada barra de navegación.
Cambio de columnas en grilla
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.
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.
Archivo:Barranavegaciónsleepstreet.png
Tamaño real 1.349×49 px
Archivo:Barranavegaciónsleepstreet2.png
Tamaño real 921×49 px
Archivo:Barranavegaciónsleepstreet3.png
Tamaño real 782×49 px
Archivo:Barranavegaciónsleepstreet4.png
Tamaño real 354×109 px
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
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.
Tamaño real del corte 1.349 × 56 px
Tamaño real del corte 921 × 48 px
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.
.png)
.png)
.png)
.png)
.png)
Grilla
web
Estamos viendo el Home del sitio web en un tamaño de 1349x1359 px
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
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
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.
