{"id":3144,"date":"2018-11-07T19:35:24","date_gmt":"2018-11-07T19:35:24","guid":{"rendered":"http:\/\/v3.abcdsol.com\/?p=2866"},"modified":"2021-01-08T20:48:01","modified_gmt":"2021-01-08T20:48:01","slug":"que-significa-que-tu-web-sea-responsive","status":"publish","type":"post","link":"https:\/\/abcdsol.com\/index.php\/es\/2018\/11\/07\/que-significa-que-tu-web-sea-responsive\/","title":{"rendered":"\u00bfQu\u00e9 significa que tu web sea responsive?"},"content":{"rendered":"\n\n[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.7.7″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ sticky_enabled=”0″]Tener una web responsive significa llegar a m\u00e1s usuarios con el mismo producto. Como ya te lo hemos contado en este post<\/a>, \u201cm\u00e1s del\u00a055% de la poblaci\u00f3n mundial es usuaria de internet<\/strong>. De ese porcentaje, el 68% procede de dispositivos m\u00f3viles que facilitan la conexi\u00f3n continua.\u201d Por ende, si tienes una web responsive, los usuarios podr\u00e1n acceder a tu p\u00e1gina desde cualquier dispositivo que utilicen.\n\nEl concepto responsiveness se define como la adaptaci\u00f3n de un producto digital a todas las resoluciones de pantalla: ordenadores de escritorios, laptops, tablets, smartphones en todos sus modelos, etc. Es decir que se trata de reordenar y redimensionar los elementos que componen una web para que en cada resoluci\u00f3n se visualicen correctamente y garantizar una excelente experiencia de usuario<\/strong>.\n\nPara lograr esto, es necesario prestar especial atenci\u00f3n al momento de dise\u00f1o y maquetado. La clave est\u00e1 en el c\u00f3digo HTML (lenguaje HTML5) y CSS o, dicho de otro modo, la estructura de la p\u00e1gina, la distribuci\u00f3n de los elementos y el estilo que tendr\u00e1n los mismos<\/strong>, as\u00ed como su ubicaci\u00f3n. As\u00ed, en este tipo de lenguaje, uno de los puntos esenciales para que el dise\u00f1o responsive funcione correctamente es colocar los valores en porcentaje. Por ejemplo width<\/strong>=”30%<\/strong>“.\n\nEn este sentido, se utiliza una t\u00e9cnica especial de CSS que se introduce en CSS3, la Media Query<\/a>. La misma se utiliza para incluir un bloque de propiedades de CSS siempre y cuando cierta condici\u00f3n se cumpla. Por ejemplo, solo si el ancho de la pantalla es de 1920 p\u00edxeles, entonces un determinado contenedor debe mostrarse (\u00fatil cuando hay mapas que se ver\u00edan mal o de manera difusa en resoluciones de pantalla muy peque\u00f1as).\n\n \n

\u00bfC\u00f3mo saber si una web es responsive?<\/h2>\nEn el sitio Screen Sizes<\/a> podr\u00e1s ver todos los tama\u00f1os de pantallas existentes y todas las resoluciones. Como seguramente comprobar\u00e1s, hay infinidad de opciones. Por ello, es importante que tu web sea completamente responsive para que llegues a todos los usuarios que utilizan internet<\/strong> desde tan amplia variedad de dispositivos.\n\nPor otro lado, si quieres ver c\u00f3mo una web se adapta a los diferentes tama\u00f1os, tienes dos opciones. Primero, puedes posicionarte con el cursor sobre el borde lateral de la p\u00e1gina y achicar o agrandar el tama\u00f1o del nevagador arrastrando el cursor.\n\n \n