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.
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.