Judgement: how would you improve this template?

Using Themes
1

Dear friends,

It’s already three years I shut down my wordpress travel blog to jump into Hugo and arranged basically from the upper line the theme I was using on Wordpress (the theme was available for Hugo as well but it was a porting and bad working).

W: https://nparisi.com
S: GitHub - parisi-n/nparisi-com: My personal photography and travel blog - built with Hugo.

I am quite satisfied about that because I built different design for multiple resolution.

However I am not an expert of modern web and I’d liek to empower it with some new technology: example, I am not sure if it is SEO-liked. ALT description for IMAGES furthemore I am not sure are SEO-ok.

How would you optimize the site?
What would you add - considering it is a travel blog but I write always from home?

I hope it will not be considered as a spam: the website is in italian and I’m not interested in non organic visits :slight_smile:

Thank you for your time!

2

Nice site and bold design.

I’d work on performance and ironing out some quirks
e.g. the dropdown menu, I had a problem clicking a link:
brave_Qd95gyjAZK

The slider didn’t work on my phone at all, not sure why.
Could be a personal thing but on my phone a lot of the body text ends 3 or 4 words to a line making it harder to read. It is approx 40 characters on a line, I’d suggest more like 50-60.

Pagespeed insights gives it a 49 for mobile, that could be improved easily I bet, e.g. for the blog cover images on mobile you use the full image but as its set to be used as a background image it shows just the middle. That means the phone is loading bigger images than required but using just the middle section means it’ll be short of enough pixels to be full retina.

Hope that isn’t too picky.

3
  1. The slider is not working for me. Overall, sliders are discouraged for several reasons.
  2. Your dropdown menu width is too big on desktop. When I select one menu and go down to choose a sub-menu, the sub-menu of the next menu shows up instead. This happens for Travel and Accessori menu items.
    The first two issues are similar to @andrewd72 's
  3. You have a lot of resources loading on your site. See areas to improve.
4

Thank you both for your points @Arif and @andrewd72 !

  1. The menù is a hot stuff: I tried several time to adjust it (I really don’t know why it happens!) but I couldn’t find any solution. Everything begun when I added the voice “Accessori” and its submenu… Any clue about it?
  2. I will try to find an alternative for the slider - but the idea to show the most important posts at the beginning of the home page likes me; I cannot imagine any other way to show them, and hot posts will get lost

Is there a way to do so in hugo?

5

Try the text with background image like the one at the top here.

1 Like
6

Instead of background images you could use a picture element for

  • responsive image sizes
  • art direction if it needs to change shape at different breakpoints

Just scanned this but the performance hit from using a background image is noted
nystudio107 | The CSS background-image property as an anti-pattern

7

Nice post; about that I’d like to go deeper into the topic as I wanted to change my image shortcode:

        <figure class="block-image {{$parentclass}}" style="display: block;{{ $parentstyle }}">

                {{ if $href }}<a href="{{ $href }}">{{end}}

                    <div class="placeholder{{if $type }} {{$type}}{{end}}" data-large="{{ .Permalink }}">
                    <img class="img-small" src="data:image/jpeg;base64,{{ $placeholder.Content | base64Encode }}"
                        {{ if $alt }} alt="{{ $alt }}"{{end}}
                        {{ if $class }} class="{{ $class }}"{{end}}
                        {{ if $style }} style="{{ $style | safeCSS }}"{{end}}
                        onerror="this.src='images/image-not-found.svg'; this.onerror='';"
                        >
                    <div style="padding-bottom: {{ div (mul .Height 100.0) .Width }}%;"></div>
                    </div>
                {{ if $href }}</a>{{end}}

            {{ if $caption }}
            <figcaption>
                {{ $caption }}
            </figcaption>
            {{ end }}

            {{ if eq $type "wide-screen" }}
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" class="resize" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-label="Ingrandisci immagine">
                <path fill="currentColor" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path>
            </svg>
            {{ end }}
        </figure>

Is it SEO compatible according to you?

I use <div class='featured-image lazy lazy-bg-image' data-background="{{ $scaled.Permalink }}"> only to show cover pictures in the home page and category page; do you think I may use picture (as your post suggests) also for these pics?

8

Submenu bug fixed (easier than expected), it will go on air in the next blog update!

image
image1391×638 72.2 KB

I’ve deleted the old slider and I realized this scrollable div.
Does it work better?

Do you have a screenshot of this please?

I am wandering whether with overflow-wrap: break-word; or max-width: 60ch I may solve the issue

9

Can we please wind this topic down? This has turned into a CSS/JS discussion that is best had elsewhere.

10

I am trying to improve the template (and this involves CSS and JS); can we keep the topic open at least?

I will open new topics for each specific problem if it is the correct behave (e.g. the migration from background-image we’ve talk

11

I suggest you move the discussion to DM.

See https://discourse.gohugo.io/t/requesting-help/9132

Simple Code of Conduct

Finally, this is a positive and friendly community, and as with other open source projects, the Hugo project runs on unpaid volunteer work. Please be reminded of a couple of rules to make things easier in the forum:

…

Discussion should be on topic, related to hugo usage. No off-topic topics like general JavaScript or CSS, or politics, please.

1 Like