Skip to content

Add header tag with mobile viewport and title #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add header tag with mobile viewport and title #1

wants to merge 2 commits into from

Conversation

@brbenji
Copy link

@brbenji brbenji commented Nov 8, 2023

Mobile First

This magic tag keeps a design consistent across desktop to mobile.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Looking nice on mobile was the main reason for adding the tag into %blog.
As a bonus, I also added a <title> tag that is pulled from the path given by %blog-actions.
The title is seen in the tabs of the browser.

@bonbud-macryg We can expand this to include a favicon. You may enjoy designing one of those.
It would look like adding <link rel="icon" type="image/png" href="focus/assets/tile/png">

@bonbud-macryg
Copy link
Collaborator

bonbud-macryg commented Nov 11, 2023

  • Title tag: The <title> addition is a good idea, but a better solution to this problem would involve pulling out the value of the first H1 tag in the post. The last item in the post's path should just be the URL path, and it's arguably a flaw in the app that setting the custom URL feels like you're naming it. Feel free to either get the H1 out or just remove the <title> idea for now, I've got it in the to-do list either way.
  • Meta tag: What you're proposing here is correct. This meta tag is standard practice and should be in the blog posts themselves. (We should also be enclosing posts in a <body> tag, but…) Two questions:
    • Is there a reproducible before/after where the post looks bad on mobile before this change and better after, that can't be blamed on the CSS?
    • Current implementation adds the header on publishing. Is there a way to add this <head> tag to all archived posts without getting a state change in +on-load involved?

Given the points above I wonder if we should put this on the shelf for now and spec out a much more wide-ranging issue to improve the HTML for posts.

@gmcz
Copy link

gmcz commented Mar 8, 2024

I'm interested in helping with better HTML overall.

Is there a reproducible before/after where the post looks bad on mobile before this change and better after, that can't be blamed on the CSS?

This is asking the question backwards, in my opinion. The CSS is applied to the HTML. The CSS will behave differently with and without that tag. You should start with great HTML and do as much at that level as reasonable, and then layer in the CSS as-needed.

Great HTML would include this viewport meta tag. If you can reduce CSS as a result, great! If you need to modify it, that's OK.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brbenji @bonbud-macryg @gmcz