{"id":3695,"date":"2013-04-24T09:44:03","date_gmt":"2013-04-24T07:44:03","guid":{"rendered":"https:\/\/www.mozaik.com\/blog\/?p=3695"},"modified":"2022-11-21T15:18:45","modified_gmt":"2022-11-21T15:18:45","slug":"respond-to-responsive","status":"publish","type":"post","link":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/","title":{"rendered":"RESPOND TO RESPONSIVE"},"content":{"rendered":"<h1 style=\"text-align: left;\"><strong>Responsive Web Design: the art of providing the best UX to multi-screen browsing.<\/strong><\/h1>\n<p style=\"text-align: left;\">Inching closer to the multi-screen era, tablets and mobile phones are rapidly replacing computers and screen transition is becoming structure specific, increasing the need for adoptable layouts that are <strong>easily operable by all devices.<\/strong><\/p>\n<p style=\"text-align: left;\">The continuous platform transitions have presented web agencies with a great\u00a0 challenge: <strong>\u201cuniformity\u201d,<\/strong> intriguing them to come up with a design that preserves the same format, content, features and applications and can dynamically adjust to fit any screen.<\/p>\n<p style=\"text-align: left;\"><strong>The truth is in the facts.<\/strong><\/p>\n<p style=\"text-align: left;\"><strong><img loading=\"lazy\" class=\"alignleft wp-image-3789 size-full\" title=\"Mozaik_responsive_infographics\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/Mozaik_responsive_infographics2.jpg\" alt=\"2012 vs 2017 web data stats\" width=\"640\" height=\"480\" \/><br \/>\n<\/strong><\/p>\n<p style=\"text-align: left;\">Powered for instant internet access on the go, at any time, from any place, <span style=\"color: #000000;\"><strong>Responsive Web Development <\/strong><\/span>responds and self-adjusts to fit any screen resolution providing easier navigation, customizing a uniform browsing experience across platforms.<\/p>\n<p style=\"text-align: left;\">Switching to <span style=\"color: #000000;\"><strong>Responsive Web Design<\/strong><\/span> evidently reduces the costs of developing and maintaining numerous \u201cdevice-specific websites\u201d, improves SEO through the lean and targeted content and minimizes browsing time, enhancing the overall user experience.<\/p>\n<p style=\"text-align: left;\">Through the intelligent use of media queries, developers have managed to target the default styles on devices by specifying screen width, resolution and orientation. <span style=\"color: #000000;\"><strong>RWD<\/strong><\/span> allows them to adopt these styles accordingly.<\/p>\n<p style=\"text-align: left;\">Looking more in depth into this breakthrough trend the highly skilled team of design, development and online marketing at Mozaik gives you an insight into the challenging aspects of <strong><span style=\"color: #000000;\">Responsive Web Design<\/span>.<\/strong><\/p>\n<h2 style=\"text-align: left;\"><span style=\"color: #99cc00;\">Concerning the design process, Mozaik&#8217;s head of design, Mirto, goes over the basics.<\/span><\/h2>\n<p style=\"text-align: left;\"><span style=\"color: #000000;\"><strong><span style=\"text-decoration: underline;\">Tips and challenges when designing a responsive website?<\/span><\/strong><\/span><\/p>\n<ul style=\"text-align: left;\">\n<li><strong><em>Define your content<\/em><\/strong><em>: Prioritize your content and keep it in a well-defined grid.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Reach the best UX<\/em><\/strong><em>: The main challenge is to find the perfect combination of usability and navigation without losing control of the basic website structure, form and function.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Create within constraints:<\/em><\/strong><em>\u00a0The designer must be aware of the limitations when designing, being certain that the site will fit in all resolutions or be confident to specify the site\u2019s appearance in smaller resolutions.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Less is more:<\/em><\/strong><em>\u00a0The website needs to remain as light as possible without many graphics <\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Extensive web font kits:<\/em><\/strong><em>\u00a0Kits from font services can quickly escalate in size as you add more character sets. Bold and italics have different character sets so this will have to be kept in mind.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Banners<\/em><\/strong><em>\u00a0: Banners are a big subject in\u00a0<\/em><em>Responsive Design<\/em><em>\u00a0as well since they cannot have the same size among screens and moreover the same position.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Make sure its \u201ctappable\u201d<\/em><\/strong>!\u00a0Don&#8217;t forget you also design for smartphones and tablets<\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong><em>Use icons in .svg format<\/em><\/strong><em>: They are easily resizable and they don\u2019t lose their sharpness.<\/em><\/li>\n<\/ul>\n<h2 style=\"text-align: left;\"><span style=\"color: #99cc00;\">Our expert web developer Mayra will demonstrate some of the features employed in the development of a responsive website.<\/span><\/h2>\n<p style=\"text-align: left;\"><img loading=\"lazy\" class=\"alignleft wp-image-3793 size-full\" title=\"Mozaik_responsive_devices\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/Mozaik_responsive_devices3.jpg\" alt=\"Responsive devices\" width=\"640\" height=\"480\" \/><\/p>\n<p style=\"text-align: left;\"><span style=\"text-decoration: underline;\"><strong>Which are the technical requirements of a responsive website?<\/strong><\/span><\/p>\n<ul style=\"text-align: left;\">\n<li><em><strong>CSS<\/strong>:\u00a0 Responsive Website is built by using CSS Media Queries. This means that the CSS itself handles the layout of the website as well as the way it will adapt in order to support any device. In other words, the developer can set the screen resolution breakpoints where the CSS will change the layout of the site.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em><em><em><strong>Server-side &#8220;dynamic CSS&#8221;<\/strong><\/em> <em>Responsive web design with server side components takes things one step further<\/em> <em>leading to website optimization regarding loading time &amp; performance. This can be accomplished by using: a) Server-side &#8220;dynamic CSS&#8221; implementation of stylesheet languages like Sass or Less or \u00a0b)<\/em> <em>Ajax through which you can serve different content or variants of the page\u00a0<\/em><\/em>while <em>loading the appropriate content.<br \/>\n<\/em><\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em><strong>Good practice:<\/strong> A good practice calls for page element sizing to be in relative units like percentages or ems, rather than absolute units like pixels.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em><strong>Resizing<\/strong>: The developer must also keep in mind that images have to be resized in order to appear correctly in the website.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em><strong><em>JavaScript frameworks<\/em>:<\/strong> Prefer using JavaScript frameworks like Modernizr, which detects the supported features of the browser and makes it easier to have fallbacks or set different scenarios when a method is not supported by the user\u2019s device.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em><strong>Time Optimization:<\/strong>\u00a0 The developer must always take actions to minimize loading time so as not to waste bandwidth with regards to website performance.<\/em><\/li>\n<\/ul>\n<h1 style=\"text-align: left;\"><span style=\"color: #9cc228;\">Online Marketing Director, Dimitris, shares with us his insight in sales and marketing as they pertain to <strong>RWD<\/strong>.<\/span><\/h1>\n<p style=\"text-align: left;\"><span style=\"text-decoration: underline;\"><strong>What are the benefits of <span style=\"color: #000000; text-decoration: underline;\">RWD <\/span>and how does it affect the sales strategy of a business?<\/strong><\/span><\/p>\n<ul style=\"text-align: left;\">\n<li><em><strong><span style=\"color: #000000;\">RWD <\/span>is a whole new way of thinking. <\/strong>It is not a device-oriented approach but instead it is user-oriented.\u00a0 It makes it easy to process content in multiple device types and window sizes even if browsers and devices <em>are<\/em> radically different.\u00a0 It also enables website owners to focus their efforts on delivering great content and analyzing onsite behavior of all users at once instead of managing two versions of the website.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em>Since micro transactions and impulse buying are activities flirting with mobile devices every hour of the day I believe that an <span style=\"color: #000000;\"><strong>RWD<\/strong><\/span> website directly affects the buying process as the owner is enabled to be flexible on smart deals and frequent updates on the content. Moreover, a \u201cone-version-only\u201d website pulls together the traffic data from mobile &amp; desktop visitors as a whole, allowing a deeper conversion optimization and understanding of user\u2019s behaviour.<\/em><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><em>We are witnessing a remarkable shift from desktop to mobile search &#8211; at least for specific markets \u2013 and it is clear that mobile is about to become the main internet access tool as smartphones and tablets are overtaking desktops.\u00a0 It is true that <span style=\"color: #000000;\"><strong>Responsive Design<\/strong><\/span> is a Search Engine friendly approach and can improve visibility in search engines, following Google\u2019s viewpoint that user experience is top priority. Consequently a great user experience equals high ranking possibilities. Furthermore, all SEO signals from links and social sharing are being attached to the website\u2019s single URL.<\/em><\/li>\n<\/ul>\n<p style=\"text-align: left;\"><img loading=\"lazy\" class=\"alignleft wp-image-3791 size-full\" title=\"lestoilesdusoleil\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/lestoilesdusoleil2.jpg\" alt=\"Les Toiles du Soleil website on multiple devices\" width=\"640\" height=\"250\" \/><\/p>\n<p style=\"text-align: left;\"><strong>Our team\u2019s expertise, experience and on-going research is central to the way Mozaik does business and will help you take yours to the next level. <\/strong><\/p>\n<p style=\"text-align: left;\"><strong>Mozaik breaks new ground and sets the trends. An apt example of our commitment to success is <a title=\"http:\/\/www.toiles-du-soleil.com\/en\/\" href=\"http:\/\/www.toiles-du-soleil.com\/en\/\" target=\"_blank\" rel=\"noopener\">\u201cLes Toiles du Soleil\u201d<\/a> website, a fully <span style=\"color: #000000;\">Responsive Website<\/span> supporting fluidly all screen resolutions including multiple advanced and dynamic functionalities, for which Mozaik was honoured with an Ebge Award.<\/strong><\/p>\n<p style=\"text-align: left;\"><span style=\"color: #000000;\"><strong>Moving deeper into the multi-screen reality Mozaik has what it takes to drive success through innovation. <\/strong><\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"color: #000000;\"><strong>We\u2019ve gone responsive! Will you?<\/strong><\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"color: #000000;\"><strong>Be responsive, contact Mozaik, <a title=\" https:\/\/www.mozaik.com\/contact.php\" href=\"https:\/\/www.mozaik.com\/contact\/\">get a quote<\/a> and let us guide you ahead of this trend!<\/strong><\/span><strong><br \/>\n<\/strong><\/p>\n<div style=\"text-align: left;\">\n<hr align=\"left\" size=\"1\" width=\"33%\" \/>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Web Design: the art of providing the best UX to multi-screen browsing. Inching closer to the multi-screen era, tablets and mobile phones are rapidly replacing computers and screen transition is becoming structure specific, increasing the need for adoptable layouts that are easily operable by all devices. The continuous platform transitions have presented web agencies [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5838,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113],"tags":[112],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>RESPOND TO RESPONSIVE - Mozaik Journal<\/title>\n<meta name=\"description\" content=\"Learn more about responsive Web Design and why it offers the best user-experience when browsing a website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"RESPOND TO RESPONSIVE - Mozaik Journal\" \/>\n<meta property=\"og:description\" content=\"Learn more about responsive Web Design and why it offers the best user-experience when browsing a website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Mozaik Journal\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MozaikOnline\/?fref=ts\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-24T07:44:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-21T15:18:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2013\/04\/Mozaik_responsive_blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"746\" \/>\n\t<meta property=\"og:image:height\" content=\"475\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"mozaik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mozaikagency\" \/>\n<meta name=\"twitter:site\" content=\"@mozaikagency\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozaik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/\",\"url\":\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/\",\"name\":\"RESPOND TO RESPONSIVE - Mozaik Journal\",\"isPartOf\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/#website\"},\"datePublished\":\"2013-04-24T07:44:03+00:00\",\"dateModified\":\"2022-11-21T15:18:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533\"},\"description\":\"Learn more about responsive Web Design and why it offers the best user-experience when browsing a website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mozaik.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"RESPOND TO RESPONSIVE\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#website\",\"url\":\"https:\/\/www.mozaik.com\/blog\/\",\"name\":\"Mozaik Journal\",\"description\":\"Mozaik Journal Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mozaik.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533\",\"name\":\"mozaik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g\",\"caption\":\"mozaik\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"RESPOND TO RESPONSIVE - Mozaik Journal","description":"Learn more about responsive Web Design and why it offers the best user-experience when browsing a website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/","og_locale":"en_US","og_type":"article","og_title":"RESPOND TO RESPONSIVE - Mozaik Journal","og_description":"Learn more about responsive Web Design and why it offers the best user-experience when browsing a website.","og_url":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/","og_site_name":"Mozaik Journal","article_publisher":"https:\/\/www.facebook.com\/MozaikOnline\/?fref=ts","article_published_time":"2013-04-24T07:44:03+00:00","article_modified_time":"2022-11-21T15:18:45+00:00","og_image":[{"width":746,"height":475,"url":"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2013\/04\/Mozaik_responsive_blog.jpg","type":"image\/jpeg"}],"author":"mozaik","twitter_card":"summary_large_image","twitter_creator":"@mozaikagency","twitter_site":"@mozaikagency","twitter_misc":{"Written by":"mozaik","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/","url":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/","name":"RESPOND TO RESPONSIVE - Mozaik Journal","isPartOf":{"@id":"https:\/\/www.mozaik.com\/blog\/#website"},"datePublished":"2013-04-24T07:44:03+00:00","dateModified":"2022-11-21T15:18:45+00:00","author":{"@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533"},"description":"Learn more about responsive Web Design and why it offers the best user-experience when browsing a website.","breadcrumb":{"@id":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.mozaik.com\/blog\/respond-to-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mozaik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"RESPOND TO RESPONSIVE"}]},{"@type":"WebSite","@id":"https:\/\/www.mozaik.com\/blog\/#website","url":"https:\/\/www.mozaik.com\/blog\/","name":"Mozaik Journal","description":"Mozaik Journal Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mozaik.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533","name":"mozaik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g","caption":"mozaik"}}]}},"_links":{"self":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/3695"}],"collection":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/comments?post=3695"}],"version-history":[{"count":7,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/3695\/revisions"}],"predecessor-version":[{"id":9128,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/3695\/revisions\/9128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/media\/5838"}],"wp:attachment":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/media?parent=3695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/categories?post=3695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/tags?post=3695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}