{"id":6775,"date":"2021-11-25T07:38:43","date_gmt":"2021-11-25T06:38:43","guid":{"rendered":"https:\/\/immune.institute\/?p=6775"},"modified":"2021-11-25T07:38:43","modified_gmt":"2021-11-25T06:38:43","slug":"diseno-web-responsive-y-su-importancia-en-la-actualidad","status":"publish","type":"post","link":"https:\/\/immune.institute\/en\/blog\/diseno-web-responsive-y-su-importancia-en-la-actualidad\/","title":{"rendered":"Responsive web design and its importance today"},"content":{"rendered":"<p><b>Did you know that smartphones are the most widely used type of electronic device in Spain for connecting to the Internet?<\/b><span style=\"font-weight: 400;\"> And this is not from us, but from a survey carried out by <\/span><a href=\"https:\/\/es.statista.com\/estadisticas\/478515\/dispositivos-usados-para-acceder-a-internet-en-espana\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Statista<\/span><\/a><span style=\"font-weight: 400;\"> with 2020 data.<\/span><\/p>\n<blockquote>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">Specifically, 93'1% of the population prefers their smartphone to connect to the network.&nbsp;<\/span><\/p>\n<\/blockquote>\n<p><span style=\"font-weight: 400;\">Data which, on the other hand, hackers know perfectly well when it comes to carrying out cyber attacks such as the <\/span><a href=\"https:\/\/immune.institute\/en\/spear-phising-que-es-y-como-evitarlo\/\"><span style=\"font-weight: 400;\">spear phishing<\/span><\/a><span style=\"font-weight: 400;\">. But in this post we don't want to delve into the different practices in cybersecurity (to name a few), <\/span><a href=\"https:\/\/immune.institute\/en\/devsecops-y-su-importancia-en-la-ciberseguridad\/\"><span style=\"font-weight: 400;\">DevSecOps<\/span><\/a><span style=\"font-weight: 400;\">), but we want to stress the importance of being aware of the different means of connection. No doubt about it, <\/span><b>responsive technology plays a key role in web design.<\/b><\/p>\n<h2><span style=\"font-weight: 400;\">What is responsive web design?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">What is responsive web design and how important is it nowadays? We'll tell you right now:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A responsive web design is a type of web design that automatically, <\/span><b>adapts to the different screens of electronic devices<\/b><span style=\"font-weight: 400;\">: laptops, smartphones, PCs, tablets, smart TVs...<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The responsive web system allows to detect the width of the screen and, consequently, <\/span><b>resize and position the different elements that make up the website<\/b><span style=\"font-weight: 400;\">The aim is to offer the best possible user experience and optimal display.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It should be noted that responsive web design should not be confused with the creation of mobile websites, as they are not the same thing! As we have pointed out in previous paragraphs, responsive web design resizes the elements of the website on all types of electronic devices, not just mobile devices. In addition, creating a mobile website implies a separate, independent project.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Responsive in IT: why it is important<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Firstly, <\/span><b>responsive web design reduces development time<\/b><span style=\"font-weight: 400;\">It allows content to go viral (it is shared on different devices) and also avoids duplication.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here's why responsive web design is important today:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>New forms of Internet consumption: <\/b><span style=\"font-weight: 400;\">As already mentioned, the current trend is towards multi-connection, with a particular emphasis on the use of smartphones. Therefore, having a responsive website becomes a real necessity.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Better user experience:<\/b><span style=\"font-weight: 400;\"> A website, where the user experience is satisfactory, is synonymous with increased interaction and brand awareness and, consequently, improved branding.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>A key factor for SEO: <\/b><span style=\"font-weight: 400;\">If your website is not optimised for mobiles (even before it is optimised for desktop), you are probably going to rank worse. If you do not have a responsive web design, you will lose a significant amount of traffic.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">How to make a responsive website?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Having explained responsive web design and its importance nowadays, it is important to know that <\/span><b>what to consider when developing responsive websites<\/b><span style=\"font-weight: 400;\">. These are some of the key web elements to resize the width of a web page:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Image and video:<\/b><span style=\"font-weight: 400;\"> Firstly, the audiovisual elements must be proportional to the size of the screens. This is to avoid uncomfortable viewing (elements outside the visual spectrum, small sizes, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Loading speed:<\/b><span style=\"font-weight: 400;\"> This section is fundamental. There is nothing that displeases a user more than a slow loading page. Simply because it is one of the main reasons why the user leaves your website. So a complete optimisation is necessary: from eliminating unnecessary resources, to eliminating plugins, to the weight of the images.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Typography: <\/b><span style=\"font-weight: 400;\">Legibility is another key factor. In addition to the size of the font, it is important to choose a typeface that is both clear and easy on the eye, as well as aesthetically pleasing.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Format: <\/b><span style=\"font-weight: 400;\">Knowing how to answer the question \"What does a website look like on a mobile, and what about on a PC? In other words, know which format to use: either portrait or landscape.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Usability:<\/b><span style=\"font-weight: 400;\"> Important! Remember that devices such as smartphones and tablets are touch devices, whereas a computer requires a mouse.<\/span><\/li>\n<\/ul>\n<p><b>And you, have you already understood what responsive web design is and its importance nowadays?<\/b><span style=\"font-weight: 400;\"> If you want to dedicate yourself to the world of web design, at IMMUNE we have different training courses that will interest you:&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Be sure to check out our <\/span><a href=\"https:\/\/immune.institute\/en\/ingenieria-software\/\"><span style=\"font-weight: 400;\">Degree in Software Development Engineering<\/span><\/a><span style=\"font-weight: 400;\">as well as our Bootcamps in <\/span><a href=\"https:\/\/immune.institute\/en\/diseno-ux-ui\/\"><span style=\"font-weight: 400;\">UX\/UI Design<\/span><\/a><span style=\"font-weight: 400;\"> o <\/span><a href=\"https:\/\/immune.institute\/en\/bootcamp-full-stack-developer\/\"><span style=\"font-weight: 400;\">Web Development<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>","protected":false},"excerpt":{"rendered":"<p>\u00bfSab\u00edas que los smartphones son el tipo de dispositivo electr\u00f3nico m\u00e1s utilizado en Espa\u00f1a para conectarse a Internet? Y esto no lo decimos nosotros, sino una encuesta realizada por Statista con datos del 2020. En concreto, un 93\u20191% de la poblaci\u00f3n prefiere su tel\u00e9fono inteligente para conectarse a la red.&nbsp; Datos que, por otro lado, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":8076,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-6775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts\/6775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/comments?post=6775"}],"version-history":[{"count":0,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts\/6775\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/media\/8076"}],"wp:attachment":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/media?parent=6775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/categories?post=6775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/tags?post=6775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}