{"id":88,"date":"2023-04-21T16:44:50","date_gmt":"2023-04-21T16:44:50","guid":{"rendered":"https:\/\/armanialtaf.co.uk\/blog\/?p=88"},"modified":"2023-04-21T16:44:50","modified_gmt":"2023-04-21T16:44:50","slug":"sbw-revisited","status":"publish","type":"post","link":"https:\/\/armanialtaf.co.uk\/blog\/2023\/04\/21\/sbw-revisited\/","title":{"rendered":"SBW Revisited"},"content":{"rendered":"\n<p>Firstly, I scaled the bakery logo to be a bit more visible and eye catching. I also added some more padding to the CTA button to give it more room for people to recognise that it is a button as opposed to a simple text with a background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"221\" src=\"https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/1.jpg\" alt=\"\" class=\"wp-image-89\" srcset=\"https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/1.jpg 617w, https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/1-300x107.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">PHP<\/h2>\n\n\n\n<p>I used server side includes for the first time on this project, which I think will greatly improve my code modularity. \u00a0As my navigation is situated within my header, I only needed to create 2 php includes, a header and a footer. Changing around the navigation bar proved to be quite a challenge as I had different folders with each html file for each page. To overcome this I renamed my pages to the corresponding name ie = \/about\/index.html to about.php and moved all the pages into one folder so the php include could find the pages correctly.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">UX<\/h2>\n\n\n\n<p>I also created a .htaccess file for the first time for this project, as it is a well established UX consideration. I think that creating this and implementing the process into my standard practice will improve my user experience design greatly. For this I included a button back to the home page with a small message to explain the 404 Error.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"479\" src=\"https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/2.jpg\" alt=\"\" class=\"wp-image-90\" srcset=\"https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/2.jpg 563w, https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/2-300x255.jpg 300w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Java<\/h2>\n\n\n\n<p>I used Javascript and included a greeting based on time of day to let customers know about what time the store is open. I think this script was easy to create and I just needed to specify the right times for it to work. I also included a fallback message in the case that users don\u2019t have or turn off javascript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"554\" height=\"183\" src=\"https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/3.jpg\" alt=\"\" class=\"wp-image-91\" srcset=\"https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/3.jpg 554w, https:\/\/armanialtaf.co.uk\/blog\/wp-content\/uploads\/2023\/04\/3-300x99.jpg 300w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">SEO<\/h2>\n\n\n\n<p>For search engine optimisation I included keywords and meta description to enhance rankings. There is a recommended character limit of 150-180 characters for descriptions as they should only feature key information for the user to briefly read on the search result page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>By habit I optimise all my images and add alt tags for them too, which ensures good accessibility for all users. I also checked my colour contrast and improved any low ratios. For example for text with a low ratio to the background, I added a drop shadow to text so it is more visible, this is the only workaround I found for text on top of an image.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Firstly, I scaled the bakery logo to be a bit more visible and eye catching. I also added some more padding to the CTA button to give it more room for people to recognise that it is a button as opposed to a simple text with a background. PHP I used server side includes for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":1,"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/armanialtaf.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}