{"id":1239,"date":"2022-03-20T08:15:02","date_gmt":"2022-03-20T08:15:02","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1239"},"modified":"2022-03-20T08:19:27","modified_gmt":"2022-03-20T08:19:27","slug":"what-is-responsive-design","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/03\/20\/what-is-responsive-design\/","title":{"rendered":"What is Responsive Design?"},"content":{"rendered":"\n<p>Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. Designers size elements in relative units (%) and apply media queries, so their designs can automatically adapt to the browser space to ensure content consistency across devices.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Best Practice &amp; Considerations for Responsive Design<\/h2>\n\n\n\n<p>With responsive design, you design for flexibility in&nbsp;<em>every<\/em>&nbsp;aspect \u2013 images, text and layouts. So, you should:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Take the \u201cmobile first\u201d approach<\/strong>:<ul><li>Scale\u00a0<em>up\u00a0<\/em>phone-sized designs to suit larger screens.<\/li><li>Always remember that mobile users need large (&gt;40 points) buttons. Also, your design must be\u00a0<em>twice<\/em>\u00a0as intuitive as desktop equivalents, since the need for well-sized elements on smaller screens can cause cramping and confusion.<\/li><\/ul><\/li><li><strong>Create fluid grids and images<\/strong>:<ul><li>Create images in their native dimension. If you don\u2019t have enough space, crop them to maximize impact.<\/li><\/ul><\/li><li><strong>Include three or more breakpoints<\/strong>\u00a0(i.e., design for 3+ devices).<\/li><li><strong>Prioritize and hide content to suit users\u2019 contexts<\/strong>. Check your visual hierarchy and use progressive disclosure and navigation drawers to give users\u00a0<em>needed<\/em>\u00a0items first. Keep nonessential items (nice-to-haves) secondary.<\/li><li><strong>Aim for minimalism<\/strong>.<\/li><li><strong>Apply\u00a0design patterns\u00a0<\/strong>\u2013 To maximize ease of use for users in their contexts and quicken their familiarity: e.g., the column drop pattern fits content to many screen types.<\/li><li><strong>Aim for\u00a0accessibility\u00a0with font sizes\/styles<\/strong>. Use contrast and background effectively. Make headlines at least 1.6 times bigger than body text. Make all text responsive so it appears in these proportions. As some users rely on screen readers, make all your text \u201creal\u201d instead of text within images.<\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. Designers size elements in relative units (%) and apply media queries, so their designs can automatically adapt to the browser space to ensure content consistency across devices.<\/p>\n","protected":false},"author":47,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[],"class_list":["post-1239","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1239"}],"version-history":[{"count":4,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1239\/revisions"}],"predecessor-version":[{"id":1243,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1239\/revisions\/1243"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}