The BarbLog

Design, front-end dev and other random thoughts

Website Planning project: Revisiting the Warm Bean Coffee website

March 13, 2014 | Comment

Task: revisit the Small Business coursework website and improve on it based on everything we’ve learned so far.

For this task my to-do list was as follows:


  • Introduce modularity by using PHP includes for head, navigation, footer and optional jQuery & jQuery UI libraries
  • Tweak link and footer colours
  • Add XML sitemap, .htaccess and robots.txt
  • Add a favicon
  • Tweak meta descriptions where appropriate and review SEO (though that had already been considered in the first iteration of the site)
  • Implement microformat (h-card) for the address and phone number in the header

Home page:

  • Add a red border to loyalty card image to make it look more polished – used multiple bg images for this to work with responsiveness of original image

Menu page:

  • Add more images and a fun quote to make it more interesting
  • Make everything easier to read by adding borders to the table rows

Find us page:

  • Improve appearance of map
  • Implement working PHP form with validation
  • Add a CAPTCHA to the form for spam prevention
  • Make CAPTCHA responsive
  • Ensure the form provides user feedback, highlighting errors in a meaningful way

So most of the changes were in the back-end and won’t be noticeable to the average user, but they make the site perform better and it would be easier to maintain like this if it was a real client. The form took the longest by far to implement, but it was a very valuable exercise as my thesis project will also involve PHP, forms and validation. I learned about regular expressions (regex) which seemed scary before but now I understand how simple they actually are! Jeffrey Way explains everything really well in his screencast series Diving into PHP.

The responsive CAPTCHA (I used the ReCAPTCHA plugin from Google) was difficult to do – I found a couple of examples online but they only worked if I used the default theme, which was an ugly red and yellow; for the clean version the code didn’t work properly. I messed around with the CSS myself to try and sort it out and I got it to work OK down to a width of 346 px without having to scroll the page sideways. Below this width unfortunately the scrollbar still appears which is not great, but realistically, that is already quite a narrow width and someone browsing from their phone is more likely to just want some quick information and not fill in forms. They can always call the phone number provided instead :-)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>