Jump to content

New website for a little dog school


Michael van Laar
 Share

Recommended Posts

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:
    post-531-0-07689000-1428274459_thumb.jpg
    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.

post-531-0-58156500-1428274226_thumb.jpg

  • Like 9
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 5 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...