How it Works

This simple website uses Bootstrap to provide the responsive look-and-feel alongside a light-weight Javascript carousel with lazy loading for the pictures. I've captured some of the lessons learnt putting this site together below.

NavBar

We want our slideshow to occupy the rest of the screen in landscape mode and so fix the Bootstrap's navbar height to 78px to make this calculation easier. The navbar has three components: an icon, a title, and a menu bar. The layout of the nav bar is defined in the nav.css file within the "assets/css" directory

I used https://icomoon.io/app/ to create my icon from a svg file. You can just as easily use your favicon.ico file or any image.

The title is centered and the font scaled proportionally to the view window so that it grows with larger screens. However, we also use the calc() function to restrict the max font size to 48px to stay within our 78px navbar height.

The menu bar makes use of css to match the Bootstrap dark-mode look-and-feel. We use the id tag to trigger slideshows and conventional href tags for the links.

Slideshow

I've chosen Flickity for the carousel utilizing the Open Source License. Commercial users should purchase the commercial license. To ease site maintenance, the slideshow images are dynamically loaded using Javascript. This has a number of advantages: (1) Images can be held in a compact array; (2) Images can be moved out of the main html page and the slides generated programmatically; (3) Overlays can be easily added at will.

Images

As soon as your images appear on the web they can be scraped and appear in search results. You can use the disallow directive in your "robots.txt" (all lower case) to prevent well-behaved bots from following your assets directory and a 'nofollow' directive on href links. This site uses a couple of tricks: (1) Flickity lazyload replaces the normal src tag for images with a 'data-flickity-lazyload' tag; (2) The images are added to the carousel using Javascript and so don't appear in the raw html file.

Images contain metadata, which can include GPS data as well as date/time, and so it's a good idea to scrub the data before uploading. It also speeds up image loading to keep the file size small and dimensions regular (for layout caluculation time).

In the England slideshow I've added an image overlay to denote National Trust properties and parks. Captions can also be added to the photos.

Lighthouse

Google provides a nifty tool in the Developer section of Chrome, called Lighthouse, for improving the performance, quality, and correctness of your web apps. When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app. Some useful tricks can be found in an article by Javier Villanueva at itnext.io. Lighthouse has both desktop and mobile modes to analyze the experience from the perspective of both types of users.

Email Obfuscation

There are a number of schemes to stop bots scraping your email address from your website. (1) Embed your address as an image or, as in this site, create a font with the letters scrambled so that visually it looks OK but syntactically it is meaningless. (2) Add a form to your site combined with Google reCaptcha. (3) Use a third-party tool such as Cloudflare's obfuscator. The first two approaches are fine if you are happy placing a little extra effort on the person to contact you, the last approach is a little more involved and might require moving your DNS to a third-party's site. Cloudflare offers a free plan that is suitable for personal websites.

Icons

To cover both mobile and desktop you will need a favicon.ico, a 32x32 png icon, and a 152x152 apple-touch-icon.png. Philippe Bernard has a nice article at https://css-tricks.com/favicon-quiz/ with lots of background on this topic.

His online generator can be found at RealFaviconGenerator