{"id":253,"date":"2023-11-14T14:47:12","date_gmt":"2023-11-14T14:47:12","guid":{"rendered":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/?p=253"},"modified":"2023-12-14T10:42:56","modified_gmt":"2023-12-14T10:42:56","slug":"website-building","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/lectures\/website-building\/","title":{"rendered":"Website Building"},"content":{"rendered":"\n<p>Ask for design for desktop and mobile\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"669\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pu-1024x669.jpg\" alt=\"\" class=\"wp-image-254\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pu-1024x669.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pu-300x196.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pu-768x502.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pu-1536x1003.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pu-2048x1337.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adaptive designs<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Breakpoint&nbsp;<\/h3>\n\n\n\n<p>The viewport (screen)-width or in pixels at which an adaptive website design switches to a different size.<\/p>\n\n\n\n<p>These are set by the designer, and controlled in the code by css media queries<\/p>\n\n\n\n<p>Most website builders will handle this for you to some extent<\/p>\n\n\n\n<p>Best practices around which pixels dimensions to use for breakpoints change over time, and are dependent on a range of factors.<\/p>\n\n\n\n<p>Webflow currently, takes a desktop first approach&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile first&nbsp;<\/h3>\n\n\n\n<p>A design strategy that focuses on starting with a mobile design and then scaling the design up to tablet and desktop.<\/p>\n\n\n\n<p>It forces the designer to, for example:<\/p>\n\n\n\n<ul>\n<li>&nbsp; prioritise user tasks, navigation, visual hierarchy and content<\/li>\n\n\n\n<li>&nbsp; consider a user that is on-the go<\/li>\n\n\n\n<li>&nbsp; use wide tap targets (at least 44px)<\/li>\n\n\n\n<li>\u00a0 not rely on desktop hover effects<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"561\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pi-2-1024x561.jpg\" alt=\"\" class=\"wp-image-258\" style=\"aspect-ratio:1.825909090909091;width:486px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pi-2-1024x561.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pi-2-300x164.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pi-2-768x421.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pi-2-1536x841.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/pi-2-2048x1122.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" width=\"867\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/po-1-867x1024.jpg\" alt=\"\" class=\"wp-image-260\" style=\"aspect-ratio:0.846411804158283;width:417px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/po-1-867x1024.jpg 867w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/po-1-254x300.jpg 254w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/po-1-768x907.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/po-1-1300x1536.jpg 1300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/11\/po-1-1733x2048.jpg 1733w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Publishing websites\u00a0<\/h3>\n\n\n\n<ul>\n<li>Can\u2019t publish from Figma&nbsp;<\/li>\n\n\n\n<li>But can design on Figma and publish on webflow and framer&nbsp;<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ask for design for desktop and mobile\u00a0 Adaptive designs Breakpoint&nbsp; The viewport (screen)-width or in pixels at which an adaptive website design switches to a different size. These are set by the designer, and controlled in the code by css media queries Most website builders will handle this for you to some extent Best practices [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/253"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":1,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/253\/revisions\/261"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/media?parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/categories?post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/tags?post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}