Revisiting my Small Business Project

Previously, I created a website for The Art of Bloom, a London high street florist. The original website was not responsive and did not have a lot of functionality.

This semester we learned about JavaScript, PHP, jQuery and MySQL. So, this next project was to use the new things we’ve learned and revisit The Art of Bloom’s website, incorporating new techniques as appropriate.

The first thing I did was look at the feedback I got for my original website and make those changes. I made sure to use comments in my code as well as more unique CSS selectors. I added and adjusted my content for better SEO and findability. I made sure to include key words and phrases as well as location phrases.

I decided to keep the design as it was in the original website, I quite liked the look-and-feel. However, I learned about responsive images using the <picture> tag, and I thought that would be appropriate for some of the images. For two of the images on the website, I used the <picture> tag. The browser loads the smaller, cropped version of the image for smaller screens and loads the larger, original image for larger screens. This is the code I used for one of the images:

<picture> <!-- telling the browser to load large image if the screen is wider than 500px, otherwise load smaller, cropped version of the image -->
   <source media="(min-width: 500px)" srcset="#">
   <img src="#" alt="colourful flower arrangement" height="330" width="494">
</picture>

I wrote a script in JS to state the opening hours in the footer based on the day of the week. I also used PHP includes for my branding, nav and footer and to add the current year to the copyright. I used PHP to create current tabs on my navigation, so that when someone clicks on a nav item, that item is highlighted in blue while they are on the page.

I created a custom error page with .htaccess. This is for better UX. I made sure to validate my code. I played around with flexbox and used it on an icon list. I created a contact request form. And of course, I re-styled the website using a mobile-first responsive approach.

You can view the final revisted The Art of Bloom website here.

Leave a Reply

Your email address will not be published. Required fields are marked *