{"id":5123,"date":"2018-10-31T08:59:40","date_gmt":"2018-10-31T12:59:40","guid":{"rendered":"https:\/\/www.webomator.com\/?p=5123"},"modified":"2018-10-31T08:59:40","modified_gmt":"2018-10-31T12:59:40","slug":"the-new-responsive-design-for-the-celtic-art-works","status":"publish","type":"post","link":"https:\/\/www.webomator.com\/wordpress\/2018\/10\/31\/the-new-responsive-design-for-the-celtic-art-works\/","title":{"rendered":"The new responsive design for The Celtic Art Works"},"content":{"rendered":"

Having finished the redesign for my Retropolis<\/a> site, it was much simpler to make the same changes to The Celtic Art Works<\/a>. The two shops are built in a similar way: for the most part I’d solved all the problems already.<\/p>\n\n\"Phone-friendly\n<\/a>\n\n

Okay, they’re not exactly<\/em> the same. I had several surprises along the way. Still, this shop took about half as much time as the first one.<\/p>\n

When I posted about the Retropolis redesign I described it as “phone-friendly”, but I never explained what I meant by that.<\/p>\n

It seemed ridiculous to maintain two separate versions of these shops, one for desktops and one for smaller displays. I’ve always thought that was a pretty terrible solution.<\/p>\n

If you view either site on a desktop computer you can see what I’ve done by resizing your browser window, from full screen to just under 400 pixels wide.<\/p>\n\n\"Responsive\n<\/a>\n

You can use CSS to wrap the elements differently at different widths, but there are design limits when you rely on CSS alone. So I made things a bit more complicated.<\/p>\n

First, I do the obvious by checking the width of your browser’s window when the pages load – but there’s also a Javascript listener that watches for changes in the browser’s width. Those changes kick off a function that hides some screen elements and reveals others. This works equally well on any platform and also allows the layout to change when a phone or tablet is rotated.<\/p>\n\n\"Narrow\n<\/a>\n

That allows the site to use more than just CSS to move the elements around. If your window’s wide enough (as in the first image), you get a large, fixed-position menu at the top of the page and a sidebar on the right; on smaller displays the wide menu gets hidden, a narrower one is revealed, and the right-hand sidebar is replaced by a copy down below. (Most of that’s shown in the second and third images.)<\/p>\n

Because I can make different changes at a variety of widths I’m able to get a pretty good looking layout at almost any size.<\/p>\n

Finally, I go through a little dance to adjust the height of the sidebar when it’s visible. You can’t check the height of a floating element in Javascript – ouch! – so I have to check the position of the footer to figure out how tall the sidebar needs to be. That’s the kind of thing that’s automatic when you lay a page out with tables, but ends up being difficult with CSS.<\/p>\n

The redesign has a problem with wide left-side content when the sidebar’s visible. So on a few pages I’ve always<\/em> hidden the sidebar and revealed the lower copy.<\/p>\n

Anyway, as I said you can play around with this<\/a> by resizing your computer’s browser window. I can’t promise hours of fun, but it may be kind of interesting to see the layout change at different widths.<\/p>\n

Oh! And consider buying something while you’re there, right?<\/p>","protected":false},"excerpt":{"rendered":"

Having finished the redesign for my Retropolis site, it was much simpler to make the same changes to The Celtic Art Works. The two shops are built in a similar way, so for the most part I’d solved all the problems already.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,15],"tags":[],"class_list":["post-5123","post","type-post","status-publish","format-standard","hentry","category-web-development","category-works-in-progress"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/posts\/5123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5123"}],"version-history":[{"count":0,"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/posts\/5123\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webomator.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}