New website for a little dog school

[Michael van Laar]

A friend of mine asked me to build a website for the dog training business she just started. She already had a graphic designer create a logo and a small print brochure and wanted a clean, simple website.

www.hundeschule-grosse-freiheit.de is the result.

The website is neither big nor fancy. But it has some nice details:

• Responsive, lazy loading images
  Almost all images (except the SVGs and the badge image in the footer) are maintained via the ProcessWire backend. Each image is rendered in eight different sizes – using respimage and lazysizes for frontend display.
  All images are created using the great ImageFocusArea module – something I wanted to be able to use in ProcessWire since I first worked with Drupal’s “ImageField Focus” module. Of course all images are minified using minimize.pw.
   
• Central asset management for images
  Because most of the decorative images are used on more than one page, it made sense to build a central image management – using a specific “settings” part of the page tree with one page per image.
  Images in sidebars or on the gallery page are chosen using page fields in combination with the Page List Image Label module:
  
  So an editor’s experience regarding the visual representation of the “linked” images is not so much different from working with default image fields.
   
• Consequent usage of a cookieless subdomain for static content.
  The cookieless subdomain specified in the AIOM+ module’s setting is also used to deliver images.
   
• Multi-language content.
  Nothing big, but my first ProcessWire site with more than one language. Of course it uses the Autodetect Language module for the homepage – as well as “hreflang” links in each page’s head to give Google as much language information as possible.
   
• Feedback and ratings
  The feedback page, which features quotes and pictures of happy clients, is populated semi-automatically. Feedback is collected using a Form Builder form on a secret page. After a training has ended the site owner sends an email to clients, thanking them for taking part and asking them for their feedback with a link to the secret form page. Clients can enter a quote, a 5-star rating and optionally an image – as well as their permission to use the quote and the image (necessary to avoid legal problems). This information is saved as a new unpublished page. After a new feedback entry page is published by the site owner, the new entry is displayed on the main feedback page. The pages used to save feedback entries feature multi-language fields. So it’s possible to present all testimonial quotes in both languages.
  The footer of each page features an aggregated 5-star rating, calculated from all single ratings displayed on the feedback page.
  Each individual feedback entry on the feedback page as well as the aggregated rating are formated using Schema.org markup. So it can be read and understood by Google and thus has the potential to be displayed as rich snippet on Google result pages.

Oh by the way: The decision to use email links rather than a contact form was made by the site owner.

[adrianmak]

did u use any css framework on this website? or you did it from scratch

[Michael van Laar]

I don’t use a framework. Instead I use my own collection of boilerplates, polyfills and tools I (re-)use in most of my sites: https://github.com/MichaelvanLaar/Website-Template-Starting-Point

This starting point is still far away from being perfect. In fact, there are always things I want to change – right now it’s more BEM-ish CSS. But it serves its purpose.

[adrianmak]

I don’t use a framework. Instead I use my own collection of boilerplates, polyfills and tools I (re-)use in most of my sites: https://github.com/MichaelvanLaar/Website-Template-Starting-Point

This starting point is still far away from being perfect. In fact, there are always things I want to change – right now it’s more BEM-ish CSS. But it serves its purpose.

Your website template is great for a website start-up.

Thanks for sharing

[DaveP]

The website is neither big nor fancy. But it has some nice details:

An understated synopsis of a very well realised site. Everything just works - the colour scheme, layout and typography ('Raleway' is perfect in this context) are all beautifully done. Bravo.

[Sergio]

Nice simple website, Michael! 

Great write-up about the modules and decisions made on the project, they will help PW newbies a lot.  

One thing I noticed is that the main image on homepage flicks on load (even on reloads). It appears bigger (upscaled) and resizes to the final format right after. I'm on Mac, Chrome Version 41.0.2272.118 (64-bit)

Thanks for sharing!

[Michael van Laar]

Sérgio, this is a side effect of the lazysizes script. The fallback image, which has a different aspect ratio, is loaded first. Then the apppropriate image for the screensize is loaded and displayed.

I just changed the behavior by not using the lazysizes script for this particular image. Now it takes a bit longer until anything is displayed on this place. So the perceived loading speed is a bit slower. But it’s definitely better because there is no change in aspect ratio of the image without the browser window being resized.

[harrymark]

Hi Michael I have a question for you. I am also working on a website. How do you add a video slider on site?