This week, it occurred to me that I’m doing responsive design all wrong.<\/p>\n\n\n\n\n\n\n\n
Since my first website, mobile designs have always been an afterthought, if they exist at all. Even if the mobile layout was meticulously designed, it was always a struggle to take my desktop site and cram it into my tiny google pixel. After learning about mobile-first design, it all finally makes sense.<\/p>\n\n\n\n
I really enjoyed working on the Sac and Zen projects. Although I found the initial CSS a bit repetitive, I got a really important takeaway which was mobile-first design. Instead of having to reinvent the html (and the wheel) to shrink everything down, flexbox makes it easy to grow the design dynamically to fit any screen size. In, fact I was able to create desktop versions of these sites with just five or ten lines of code. I will admit I didn’t create as many screen widths as were asked, but I think I was able to get some good practice with the concept. If I was making a real website, I would probably spare a little attention for tablet users.<\/p>\n\n\n\n
Going forward, I think a challenge will now be testing screen sizes. Although inconvenient, I think I’ll have to start incorporating my phone and laptop into the debugging mix. Resizing the window with inspect element just doesn’t give the same impression as viewing the site on an actual device of that size.<\/p>\n\n\n\n
Overall, I feel like learning about mobile-first design was one of the final pieces of the puzzle needed to take me from beginner to intermediate web designer. I feel excited to soon get started on my final, this time around doing it right from the start. Other than that, I don’t have a lot more to say about the past two weeks. Things have been going well, and I foresee them continuing to go well until the end of the semester – which is now within sight!<\/p>\n\n\n\n
Cheers, and happy coding,
Alex<\/p>\n","protected":false},"excerpt":{"rendered":"
This week, it occurred to me that I’m doing responsive design all wrong.<\/p>\n","protected":false},"author":99,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[4,3,35,18],"class_list":["post-2023","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25","tag-css","tag-html","tag-responsive-design","tag-web-design"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2023","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\/99"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2023"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2023\/revisions"}],"predecessor-version":[{"id":2024,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2023\/revisions\/2024"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}