{"id":6104,"date":"2022-02-07T08:05:00","date_gmt":"2022-02-07T08:05:00","guid":{"rendered":"https:\/\/or-design.org\/?p=6104"},"modified":"2022-11-28T12:50:11","modified_gmt":"2022-11-28T12:50:11","slug":"diseno-web-responsive","status":"publish","type":"post","link":"https:\/\/or-design.org\/?p=6104","title":{"rendered":"Dise\u00f1o Web Responsive: \u00bfPor qu\u00e9 tu sitio web debe serlo?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6104\" class=\"elementor elementor-6104\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1895905a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1895905a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6e25f119\" data-id=\"6e25f119\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d26d5e9 elementor-widget elementor-widget-heading\" data-id=\"1d26d5e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Dise\u00f1o Web Responsive: \u00bfPor qu\u00e9 tu sitio web debe serlo?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-624aed85\" data-id=\"624aed85\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-23d1879c elementor-widget elementor-widget-image\" data-id=\"23d1879c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"803\" src=\"https:\/\/or-design.org\/wp-content\/uploads\/2022\/02\/diseno-web-responsive-para-tu-sitio-web.png\" class=\"attachment-large size-large wp-image-6248\" alt=\"Diseno web responsive para tu sitio web\" srcset=\"https:\/\/or-design.org\/wp-content\/uploads\/2022\/02\/diseno-web-responsive-para-tu-sitio-web.png 921w, https:\/\/or-design.org\/wp-content\/uploads\/2022\/02\/diseno-web-responsive-para-tu-sitio-web-300x300.png 300w, https:\/\/or-design.org\/wp-content\/uploads\/2022\/02\/diseno-web-responsive-para-tu-sitio-web-150x150.png 150w, https:\/\/or-design.org\/wp-content\/uploads\/2022\/02\/diseno-web-responsive-para-tu-sitio-web-768x771.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a7c0aab elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a7c0aab\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4308943\" data-id=\"4308943\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-109e49e elementor-widget elementor-widget-spacer\" data-id=\"109e49e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-012dfca elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"012dfca\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-055e6ce\" data-id=\"055e6ce\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fdf271f elementor-widget elementor-widget-text-editor\" data-id=\"fdf271f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Con el considerable desarrollo del uso de los tel\u00e9fonos m\u00f3viles en todo el mundo, es importante y fundamental que todo sitio web tiene un <strong>dise\u00f1o web responsive<\/strong>. En este art\u00edculo, encontrar\u00e1s los elementos fundamentales de este concepto, las ventajas y las diferencias con el proyecto AMP y el mobile first. Si te quedas hasta el final, te mostraremos algunos ejemplos de proyectos web que hemos desarrollado para nuestros clientes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5a7f2c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5a7f2c8\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-71bc8e30\" data-id=\"71bc8e30\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-334ad735 elementor-widget elementor-widget-heading\" data-id=\"334ad735\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00bfQu\u00e9 es y por qu\u00e9 es muy importante?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c96ce4b elementor-widget elementor-widget-text-editor\" data-id=\"c96ce4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Un <strong>dise\u00f1o web responsive<\/strong> o en ingl\u00e9s (RWD) es una t\u00e9cnica de dise\u00f1o que permite una adaptabilidad de la visualizaci\u00f3n independientemente del soporte (m\u00f3viles, tabletas, ordenador) y del sistema operativo (Android, IOS).<\/p><p>Es un concepto que <strong>responde a una necesidad<\/strong> real de los usuarios que consultan la web cada vez m\u00e1s en su tel\u00e9fono. La adaptabilidad del dise\u00f1o web responsive permite responder a esta necesidad y mejorar la experiencia del usuario.<\/p><p>La raz\u00f3n por la que el dise\u00f1o web responsive es tan importante es que los tel\u00e9fonos m\u00f3viles se utilizan cada vez m\u00e1s para consultar contenidos web. Seg\u00fan <a href=\"https:\/\/es.statista.com\/estadisticas\/478515\/dispositivos-usados-para-acceder-a-internet-en-espana\/\" target=\"_blank\" rel=\"noopener\">Statista<\/a>, en 2020, en Espa\u00f1a, el tel\u00e9fono m\u00f3vil era el dispositivo m\u00e1s utilizado para conectarse a Internet (<strong>93,1%),<\/strong> seguido del ordenador port\u00e1til (71,4%).<\/p><p>Como habr\u00e1s comprendido, si no tienes un sitio web responsive, corres el riesgo de perder a muchos de tus visitantes y clientes.<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1c5034b6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c5034b6\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3c0d4e8\" data-id=\"3c0d4e8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3517ae17 elementor-widget elementor-widget-heading\" data-id=\"3517ae17\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Elementos fundamentales de un dise\u00f1o web responsive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59a745d6 elementor-widget elementor-widget-text-editor\" data-id=\"59a745d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Podemos mencionar <strong>4 elementos fundamentales<\/strong> para un dise\u00f1o web responsive:<\/p><ol><li>En primer lugar, se utilizan dos lenguajes: <strong>CSS<\/strong>, que permite modificar el dise\u00f1o y la disposici\u00f3n de los elementos de una p\u00e1gina, y <strong>HTML<\/strong>, que controla la estructura, los elementos y el contenido de la p\u00e1gina.<\/li><li>Las <strong><em>medias queries<\/em><\/strong> (consultas de medios) son importantes. Se trata de una t\u00e9cnica de CSS introducida en CSS3 para hacer que el contenido se adapte autom\u00e1ticamente a diferentes tama\u00f1os de pantalla.<\/li><li>Las <strong>rejillas de fluidos<\/strong> que permitir\u00e1n adaptar din\u00e1micamente los diferentes tama\u00f1os de los elementos en funci\u00f3n del tama\u00f1o de la pantalla utilizada. Todos los elementos fluidos ocupan el mismo porcentaje de espacio en las diferentes pantallas.<\/li><li>Las <strong>im\u00e1genes deben ser flexibles<\/strong> para ser responsive. El tama\u00f1o y la disposici\u00f3n se adaptar\u00e1n a la pantalla del usuario.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1c16633f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c16633f\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4129aa0f\" data-id=\"4129aa0f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-109f5954 elementor-widget elementor-widget-heading\" data-id=\"109f5954\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ventajas de tener un dise\u00f1o web responsive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62863e61 elementor-widget elementor-widget-text-editor\" data-id=\"62863e61\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Podemos mencionar varias <strong>ventajas<\/strong> del dise\u00f1o web responsive:<\/p><ul><li>El dise\u00f1o web responsive solo requiere un c\u00f3digo HTML y un URL.<\/li><li>Permite una experiencia de usuario \u00f3ptima en t\u00e9rminos de ergonom\u00eda.<\/li><li>Permite un mejor posicionamiento en los motores de b\u00fasqueda.<\/li><li>Este dise\u00f1o mejora los tiempos de carga.<\/li><li>Observamos una mejor tasa de conversi\u00f3n porque los visitantes pasan m\u00e1s tiempo en el sitio web si est\u00e1 adaptado y es m\u00e1s probable que realicen una acci\u00f3n.<\/li><li>La tasa de rebote disminuye. Si tu sitio es responsive, es m\u00e1s probable que los usuarios naveguen por tu sitio viendo m\u00e1s p\u00e1ginas.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e4a5ec5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e4a5ec5\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55f77ed\" data-id=\"55f77ed\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0aa5a57 elementor-widget elementor-widget-heading\" data-id=\"0aa5a57\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">AMP Vs Dise\u00f1o web Responsive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87f0bfb elementor-widget elementor-widget-text-editor\" data-id=\"87f0bfb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>El dise\u00f1o AMP (<strong>Accelerated Mobile Pages<\/strong>), como su nombre indica, pretende <strong>mejorar el tiempo de carga de las p\u00e1ginas en el m\u00f3vil<\/strong>. Es la optimizaci\u00f3n para la distribuci\u00f3n de contenidos en el m\u00f3vil.<\/p><p>Un <strong>dise\u00f1o web responsive no tiene el mismo objetivo que un proyecto AMP<\/strong>. Este \u00faltimo, como acabamos de mencionar, se centra en la velocidad de carga y, por lo tanto, tiene como objetivo ofrecer el contenido lo m\u00e1s r\u00e1pido posible en el m\u00f3vil. Este sistema tambi\u00e9n puede funcionar en un sitio web existente.<\/p><p>Por otro lado, un sitio web responsive tiene como objetivo un dise\u00f1o web para cualquier dispositivo y es m\u00e1s centrado en la flexibilidad que en la velocidad. Adem\u00e1s, un dise\u00f1o web responsive debe sustituir a un dise\u00f1o web existente.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-38a7925 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"38a7925\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-408d37d\" data-id=\"408d37d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-427c8a7 elementor-widget elementor-widget-heading\" data-id=\"427c8a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adaptive Web Design Vs Responsive Web Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fa6c0b elementor-widget elementor-widget-text-editor\" data-id=\"5fa6c0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>El <strong>Adaptive Web Design (AWD) o Dise\u00f1o Web Adaptado<\/strong> es diferente del dise\u00f1o web responsive. De hecho, se basa en una <strong>estrategia de contenidos espec\u00edfica para cada medio<\/strong> en el momento del dise\u00f1o. Es decir, este tipo de dise\u00f1o requiere varios dise\u00f1os del mismo sitio web para poder adaptarse en varios dispositivos (que son de diferentes tama\u00f1os).<\/p><p>El Dise\u00f1o Web Adaptado ofrece una <strong>mejor experiencia de usuario<\/strong> porque se adapta a cada situaci\u00f3n de navegaci\u00f3n en diferentes dispositivos. Este dise\u00f1o detecta el tama\u00f1o de la pantalla del usuario y carga la versi\u00f3n correcta del sitio web.<\/p><p>En cambio, el dise\u00f1o web responsive se adapta al tama\u00f1o de la pantalla de cualquier dispositivo. Por lo tanto, <strong>el Dise\u00f1o Web Adaptado forma parte del dise\u00f1o web responsive<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b761277 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b761277\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5150096\" data-id=\"5150096\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d1ca5f elementor-widget elementor-widget-heading\" data-id=\"1d1ca5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ejemplos dise\u00f1o web responsive que hemos desarrollados <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7e0ab3 elementor-widget elementor-widget-text-editor\" data-id=\"d7e0ab3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>OR Design ofrece un <strong>servicio de dise\u00f1o 100% personalizado y responsive<\/strong>. Nuestros expertos en dise\u00f1o son apasionados y experimentados. Aqu\u00ed hay 4 ejemplos de sitios web que hemos desarrollado en nuestros 10 a\u00f1os de existencia.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8950ce elementor-widget elementor-widget-heading\" data-id=\"a8950ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/or-design.org\/desarrollo\/circuit-paul-ricard\/\" target=\"_blank\">Para el Circuit Paul Ricard:<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5142053 elementor-widget elementor-widget-image\" data-id=\"5142053\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/or-design.org\/desarrollo\/circuit-paul-ricard\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"768\" height=\"513\" src=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/76507-768x513.jpg\" class=\"attachment-medium_large size-medium_large wp-image-1843\" alt=\"Website Circuit Paul Ricard\" srcset=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/76507-768x513.jpg 768w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/76507-300x200.jpg 300w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/76507-1024x684.jpg 1024w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/76507-1536x1025.jpg 1536w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/76507.jpg 2000w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd20863 elementor-widget elementor-widget-heading\" data-id=\"cd20863\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/or-design.org\/diseno\/amaco\/\" target=\"_blank\">Para Amaco:<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bf01a6 elementor-widget elementor-widget-image\" data-id=\"1bf01a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/or-design.org\/diseno\/amaco\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"768\" height=\"512\" src=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/amaco-web-4-768x512.jpg\" class=\"attachment-medium_large size-medium_large wp-image-1544\" alt=\"Web Amaco\" srcset=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/amaco-web-4-768x512.jpg 768w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/amaco-web-4-300x200.jpg 300w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/amaco-web-4-1024x683.jpg 1024w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/amaco-web-4-1536x1024.jpg 1536w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/03\/amaco-web-4.jpg 1800w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8947fbb elementor-widget elementor-widget-heading\" data-id=\"8947fbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/or-design.org\/diseno\/resolt\/\" target=\"_blank\">Para Resolt:<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc0dc9f elementor-widget elementor-widget-image\" data-id=\"bc0dc9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/or-design.org\/diseno\/resolt\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"768\" src=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/resolt-web-768x768.jpg\" class=\"attachment-medium_large size-medium_large wp-image-1551\" alt=\"Web Resolt\" srcset=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/resolt-web-768x768.jpg 768w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/resolt-web-300x300.jpg 300w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/resolt-web-1024x1024.jpg 1024w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/resolt-web-150x150.jpg 150w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/resolt-web.jpg 1200w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8eaa191 elementor-widget elementor-widget-heading\" data-id=\"8eaa191\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/or-design.org\/diseno\/arhis\/\" target=\"_blank\">Para Arhis:<\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6289d5 elementor-widget elementor-widget-image\" data-id=\"e6289d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"513\" src=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/web-arhis-768x513.jpg\" class=\"attachment-medium_large size-medium_large wp-image-1558\" alt=\"Web Arhis\" srcset=\"https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/web-arhis-768x513.jpg 768w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/web-arhis-300x200.jpg 300w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/web-arhis-1024x683.jpg 1024w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/web-arhis-1536x1025.jpg 1536w, https:\/\/or-design.org\/wp-content\/uploads\/2021\/02\/web-arhis.jpg 1798w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5732fe3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5732fe3\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ebd7dc5\" data-id=\"ebd7dc5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d92b8ec elementor-widget elementor-widget-text-editor\" data-id=\"d92b8ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Muy cerca del concepto de dise\u00f1o web responsive, encontramos el <strong>Dise\u00f1o Mobile First<\/strong>. \u00bfConoces la diferencia? Para saberlo todo, consulta nuestra entrada del blog dedicada a este tema.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0aa0365 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0aa0365\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-26956a6\" data-id=\"26956a6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ca4ad3c elementor-widget elementor-widget-spacer\" data-id=\"ca4ad3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Con el considerable desarrollo del uso de los tel\u00e9fonos m\u00f3viles en todo el mundo, es importante y fundamental que todo sitio web tiene un dise\u00f1o web responsive. En este art\u00edculo, encontrar\u00e1s los elementos fundamentales de este concepto, las ventajas y las diferencias con el proyecto AMP y el mobile first. Si te quedas hasta el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6248,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[6,15],"tags":[],"class_list":["post-6104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-web"],"_links":{"self":[{"href":"https:\/\/or-design.org\/index.php?rest_route=\/wp\/v2\/posts\/6104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/or-design.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/or-design.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/or-design.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/or-design.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6104"}],"version-history":[{"count":0,"href":"https:\/\/or-design.org\/index.php?rest_route=\/wp\/v2\/posts\/6104\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/or-design.org\/index.php?rest_route=\/wp\/v2\/media\/6248"}],"wp:attachment":[{"href":"https:\/\/or-design.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/or-design.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/or-design.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}