Tes un " sitio web sensíbel "? Este é un sitio cun deseño que cambia segundo o tamaño do tamaño do dispositivo e do visitante . O deseño web receptivo é agora unha mellor práctica na industria. Google recomenda e atopou en millóns de sitios en toda a rede. Non obstante, hai unha gran diferenza entre ter un sitio web que simplemente "encaixa" en diferentes tamaños de pantalla e ter un sitio realmente receptivo.
Vexo rutinariamente que as empresas rediseñen o seu sitio e empuxen un comunicado de prensa que exalta as virtudes do seu novo deseño compatible con dispositivos móbiles. Cando visito eses sitios, o que atopo a miúdo é un deseño que efectivamente escala e cambia para que se adapte a diferentes pantallas, pero iso é polo que toman a idea de capacidade de resposta. Isto non é suficiente. Un sitio realmente receptivo fai máis que unha escala para adaptarse a unha pantalla máis pequena ou maior. Nestes sitios, tamén atoparás os seguintes trazos importantes.
1. Rendemento optimizado
A ninguén lle gusta esperar que se cargue un sitio e cando alguén use un dispositivo móbil cunha conexión que non sexa ideal, a necesidade de que un sitio se cargue rápidamente é aínda máis importante.
Entón como optimiza o rendemento do teu sitio? Se comezas cun novo sitio como parte dun redeseño, deberías facer un punto para crear un orzamento de rendemento como parte dese proxecto. Se estás a traballar cun sitio existente e non está a partir de cero, o primeiro paso é probar o rendemento do teu sitio para ver onde estás hoxe.
Unha vez que teña unha base de referencia de onde está o seu sitio de rendemento, pode comezar a realizar as melloras necesarias para aumentar a velocidade de descarga. Un gran lugar para comezar é probablemente coas imaxes do teu sitio. As imaxes demasiado grandes son o primeiro culpable cando se trata de cargar sitios lentos, polo tanto, optimizar as túas imaxes para a entrega web pode realmente axudar o teu sitio desde o punto de vista do rendemento.
A realidade é que o rendemento mellorado do sitio web e as velocidades de descarga rápidas son un beneficio que todos os visitantes apreciarán. Despois de todo, ninguén xamais se queixou de que un sitio cargado "demasiado rápido", pero se un sitio leva moito tempo para cargar, absolutamente cambiará a xente de que se axuste sensiblemente na súa pantalla ou non.
2. Xerarquía de contido intelixente
Cando se mostra un sitio web nunha pantalla grande, vostede é capaz de distribuír contido de varias maneiras por mor da pantalla substancial de inmobles dispoñibles. A miúdo pode encaixar imaxes e imaxes importantes, actualizacións de novas, información de eventos e navegación de sitios na pantalla ao mesmo tempo. Isto permite que un visitante poida escanear o contido de toda a páxina de forma fácil e rápida e decidir o que é importante para eles.
Este escenario cambia bastante dramaticamente ao levar o deseño do sitio e transformalo para dispositivos de pantalla pequena, como un teléfono móbil. De súpeto estás traballando cunha fracción da propiedade en pantalla que tiña antes. Isto significa que debes decidir o que aparecerá primeiro no sitio, o que o seguirá, etc. En vez de que se vexan ao mesmo tempo, probablemente só tes o espazo para mostrar unha ou dúas cousas (unha das cales probablemente sexa a navegación). Isto significa que se deben facer decisións de xerarquía. Desafortunadamente, o que moitas veces determina o que aparece primeiro na pantalla e despois o segundo, etc. é a forma na que a páxina está codificada. É máis sinxelo, cando se constrúe un sitio de resposta, para amosar o que hai primeiro no código primeiro na pantalla, seguido do segundo elemento do código e así por diante. Desafortunadamente, o que pode ser máis importante nun dispositivo pode non ser tan crítico noutro. Un sitio realmente receptivo entende que a xerarquía do contido debería cambiar en función de situacións diferentes e debería ser intelixente sobre o que mostra onde.
As melloras nas técnicas de deseño de CSS, incluíndo o deseño de táboas CSS, Flexbox e moito máis, permiten aos diseñadores e desenvolvedores web máis opcións cando se trata de establecer contido de forma intelixente, en vez de ser alteradas pola orde exacta das áreas de contido no código HTML. Aproveitar estas novas técnicas de deseño será aínda máis importante xa que a paisaxe do dispositivo e as necesidades dos usuarios do noso sitio seguen evolucionando.
3. Experiencias que teñen en conta as fortalezas e as debilidades dun dispositivo
Manténdose no tema de dispositivos: cada dispositivo que alguén poida usar para visitar o seu sitio posúe puntos fortes e débiles inherentes a esa plataforma. Un excelente sitio de resposta entende as capacidades e limitacións de diferentes dispositivos e utilízalles para crear experiencias personalizadas que sexan máis axeitadas para calquera dispositivo que un visitante poida utilizar neste momento.
Por exemplo, un teléfono móbil inclúe unha serie de funcións que non atoparía nunha computadora de escritorio tradicional. O GPS é un exemplo dunha característica centrada no móbil (si, tamén pode obter información de localización xeral nos escritorios, pero o dispositivo GPS é moito máis preciso). O seu sitio pode utilizar a información do GPS para enviar de forma intelixente unha información moi detallada e específica de dirección paso a paso ou ofertas especiais en función do lugar onde estean naquel momento.
Outro exemplo deste principal na práctica sería un sitio que comprenda o tipo de pantalla que está a usar e envía as imaxes máis adecuadas para esa pantalla. Se ten unha pantalla con alta densidade de píxeles, pode decidir enviar imaxes de maior calidade a esa pantalla. Estas mesmas imaxes non terían sentido nunha pantalla menos capaz, e a calidade extra perderíase mentres se descargase o tamaño do ficheiro extra por ningún motivo real.
Sitios realmente atractivos consideran a experiencia completa do usuario e traballan para adaptar esa experiencia non só a un tipo de dispositivo ou tamaño da súa pantalla, senón tamén a outros aspectos importantes do hardware.
4. Contido co contexto
Inicialmente, o deseño web receptivo recibiu o seu nome debido á idea do deseño dun sitio que respondía a diferentes tamaños de pantalla, pero pode responder moito máis que só o tamaño da pantalla. Baseándose no exemplo anterior de usar os puntos fortes e débiles dun dispositivo, podes usar estes, así como outros datos como a data e hora, para personalizar realmente unha experiencia de sitio web.
Imaxina un sitio web para un gran evento comercial. Mentres un sitio web sensible cambiará o deseño das páxinas do sitio para escalar con diferentes pantallas, tamén pode usar a data para determinar que contido é máis importante para mostrar. Se é o período de tempo anterior ao evento, é probable que desexe amosar información de rexistro de xeito destacado. Se, con todo, o evento está a suceder nese momento, o rexistro pode non ser o contido máis importante. No seu canto, pode decidir que o horario de eventos dos días é máis crítico xa que é máis relevante para as necesidades inmediatas dese usuario.
Levando as cousas un paso máis aló, podes tocar o GPS dun dispositivo para determinar onde realmente están na feira. Poderías darlles contido interactivo en función da súa localización, mostrándolos cabinas próximas ou sesións a piques de comezar.
5. Accesibilidade
O exemplo final veremos como un sitio pode realmente responder ás necesidades do visitante é pensar sobre a accesibilidade do sitio web . Os sitios web deben poder ser utilizados por tantas persoas como sexa posible, incluídas as persoas con discapacidade. O seu sitio web debería poder ser usado por alguén que precisa dun lector de pantalla ou outro software asistido para acceder ao seu contido. Deste xeito, o seu sitio responde ás súas necesidades porque asegurou que a experiencia, aínda que sexa diferente para os visitantes con discapacidade, aínda é adecuada.
Ao responder a tantos datos como sexa posible, e non só o tamaño da pantalla, un sitio web pode ser moito máis que "amigable para móbil". Pode converterse nunha experiencia verdadeiramente sensible en todos os sentidos da frase.