{"id":52,"date":"2017-11-06T19:57:44","date_gmt":"2017-11-06T19:57:44","guid":{"rendered":"http:\/\/wpdev.ecko.me\/?p=52"},"modified":"2017-11-06T19:57:44","modified_gmt":"2017-11-06T19:57:44","slug":"responsive-mobile-design","status":"publish","type":"post","link":"https:\/\/crownandluxury.com\/?p=52","title":{"rendered":"Responsive &#038; Mobile Design"},"content":{"rendered":"\n<p>RWD allows&nbsp;easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from mobile phones to desktop computer monitors).&nbsp;A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries, an extension of the @media rule.<\/p>\n\n\n\n<p>Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic.&nbsp;This trend is so prevalent that Google has begun to boost the ratings of sites that are mobile friendly if the search was made from a mobile device.&nbsp;This has the net effect of penalizing sites that are not mobile friendly.<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\"><li>The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.<\/li><li>Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.<\/li><li>Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.<\/li><li>Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality\/usability avoiding some of the pitfalls of device-side-only solutions.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"relatedconcepts\">Related Concepts<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"audienceanddeviceawareada\">Audience and Device Aware (ADA)<\/h3>\n\n\n\n<p>Audience and Device Aware is an approach aimed at ensuring that a site is optimised to deliver what a user wants and that works effectively on the device being used to access the site. Unlike Responsive web design (RWD), which crafts a site visually for a range of devices, ADA aims to reflect the many different elements that enhance and impact on the performance and usability of a site. The predominant application for the ADA approach is for mobile and smaller screen devices. The principle truly sees the adoption of a \u201cmobile first\u201d strategy and focuses on the performance of a site and value that it delivers to a user and the business.<br>\n<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"mobilefirst\">Mobile First<\/h3>\n\n\n\n<p>&#8220;Mobile first&#8221;, unobtrusive JavaScript, and progressive enhancement (strategies for when a new site design is being considered) are related concepts that predated RWD: browsers of basic mobile phones do not understand JavaScript or media queries, so the recommended practice is to create a basic web site, and enhance it for smart phones and PCs\u2014rather than try graceful degradation to make a complex, image-heavy site work on the most basic mobile phones.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>RWD allows&nbsp;easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from mobile phones to desktop computer monitors).&nbsp;A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries, an extension of the @media rule. Responsive web design [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[11,24],"class_list":["post-52","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-development","tag-css","tag-sass"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive &amp; Mobile Design - Crown an Luxury Timepieces<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crownandluxury.com\/?p=52\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive &amp; Mobile Design - Crown an Luxury Timepieces\" \/>\n<meta property=\"og:description\" content=\"RWD allows&nbsp;easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from mobile phones to desktop computer monitors).&nbsp;A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries, an extension of the @media rule. Responsive web design [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crownandluxury.com\/?p=52\" \/>\n<meta property=\"og:site_name\" content=\"Crown an Luxury Timepieces\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-06T19:57:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"CrownAndLuxury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CrownAndLuxury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crownandluxury.com\/?p=52\",\"url\":\"https:\/\/crownandluxury.com\/?p=52\",\"name\":\"Responsive & Mobile Design - Crown an Luxury Timepieces\",\"isPartOf\":{\"@id\":\"https:\/\/crownandluxury.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/crownandluxury.com\/?p=52#primaryimage\"},\"image\":{\"@id\":\"https:\/\/crownandluxury.com\/?p=52#primaryimage\"},\"thumbnailUrl\":\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg\",\"datePublished\":\"2017-11-06T19:57:44+00:00\",\"author\":{\"@id\":\"https:\/\/crownandluxury.com\/#\/schema\/person\/689dd98bb396b64007dc7139deb62482\"},\"breadcrumb\":{\"@id\":\"https:\/\/crownandluxury.com\/?p=52#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crownandluxury.com\/?p=52\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crownandluxury.com\/?p=52#primaryimage\",\"url\":\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg\",\"contentUrl\":\"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg\",\"width\":1920,\"height\":1200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crownandluxury.com\/?p=52#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crownandluxury.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive &#038; Mobile Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crownandluxury.com\/#website\",\"url\":\"https:\/\/crownandluxury.com\/\",\"name\":\"Crown an Luxury Timepieces\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crownandluxury.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/crownandluxury.com\/#\/schema\/person\/689dd98bb396b64007dc7139deb62482\",\"name\":\"CrownAndLuxury\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crownandluxury.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1eef7995d66a0a390150f32f123dda9c52df4bb23af2e403d2f9d5ea8babaa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1eef7995d66a0a390150f32f123dda9c52df4bb23af2e403d2f9d5ea8babaa82?s=96&d=mm&r=g\",\"caption\":\"CrownAndLuxury\"},\"sameAs\":[\"https:\/\/crownandluxury.com\"],\"url\":\"https:\/\/crownandluxury.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive & Mobile Design - Crown an Luxury Timepieces","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:\/\/crownandluxury.com\/?p=52","og_locale":"en_US","og_type":"article","og_title":"Responsive & Mobile Design - Crown an Luxury Timepieces","og_description":"RWD allows&nbsp;easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from mobile phones to desktop computer monitors).&nbsp;A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries, an extension of the @media rule. Responsive web design [&hellip;]","og_url":"https:\/\/crownandluxury.com\/?p=52","og_site_name":"Crown an Luxury Timepieces","article_published_time":"2017-11-06T19:57:44+00:00","og_image":[{"width":1920,"height":1200,"url":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg","type":"image\/jpeg"}],"author":"CrownAndLuxury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"CrownAndLuxury","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crownandluxury.com\/?p=52","url":"https:\/\/crownandluxury.com\/?p=52","name":"Responsive & Mobile Design - Crown an Luxury Timepieces","isPartOf":{"@id":"https:\/\/crownandluxury.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/crownandluxury.com\/?p=52#primaryimage"},"image":{"@id":"https:\/\/crownandluxury.com\/?p=52#primaryimage"},"thumbnailUrl":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg","datePublished":"2017-11-06T19:57:44+00:00","author":{"@id":"https:\/\/crownandluxury.com\/#\/schema\/person\/689dd98bb396b64007dc7139deb62482"},"breadcrumb":{"@id":"https:\/\/crownandluxury.com\/?p=52#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crownandluxury.com\/?p=52"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crownandluxury.com\/?p=52#primaryimage","url":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg","contentUrl":"https:\/\/crownandluxury.com\/wp-content\/uploads\/2016\/02\/image-6.jpg","width":1920,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/crownandluxury.com\/?p=52#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crownandluxury.com\/"},{"@type":"ListItem","position":2,"name":"Responsive &#038; Mobile Design"}]},{"@type":"WebSite","@id":"https:\/\/crownandluxury.com\/#website","url":"https:\/\/crownandluxury.com\/","name":"Crown an Luxury Timepieces","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crownandluxury.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/crownandluxury.com\/#\/schema\/person\/689dd98bb396b64007dc7139deb62482","name":"CrownAndLuxury","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crownandluxury.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1eef7995d66a0a390150f32f123dda9c52df4bb23af2e403d2f9d5ea8babaa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1eef7995d66a0a390150f32f123dda9c52df4bb23af2e403d2f9d5ea8babaa82?s=96&d=mm&r=g","caption":"CrownAndLuxury"},"sameAs":["https:\/\/crownandluxury.com"],"url":"https:\/\/crownandluxury.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":0,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=\/wp\/v2\/media\/964"}],"wp:attachment":[{"href":"https:\/\/crownandluxury.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crownandluxury.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}