13 ms·
I expect this to become a thread of people sharing their preferences. I prefer something minimal, that I can almost remember and write by hand: <!DOCTYPE htm
by hawski 6y ago
I expect this to become a thread of people sharing their preferences. I prefer something minimal, that I can almost remember and write by hand:
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>
body{
font:menu;font-size:1.125em;
margin:auto;max-width:40em;
padding:0 0.5em 90vh 0.5em;
}
</style>
I don't use html, head and body tags and I don't close tags that don't need to be closed like p. With this html is almost like markdown.
I use this bottom padding, because I like to scroll all the way up and it also is useful if you have low anchors for one to see on top what was supposed to be there.
- SquareWheel 6y agoNo box-sizing: border-box?
- hawski 6y agoI'm not doing anything complex enough for it to matter.
- greggturkington 6y agoLike using margins or padding?
- lrem 6y ago<meta name=viewport content="width=device-width,initial-scale=1"> Excuse my ignorance: what the heck does this achieve?!
- ohazi 6y agoIt's an incantation to make the page look slightly less stupid on a phone. https://www.w3schools.com/css/css_rwd_viewport.asp https://www.w3schools.com/css/css_rwd_viewport.asp for an example image https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... for more detailed info
- SahAssar 6y agoIt sets mobile browsers use actual widths and not emulate desktop width.
- la_fayette 6y agoit is not exactly the actual width of the device, but the default viewport width, given in CSS pixels. E.g. for the iphone 6 it is 375 pixel, although the physical width is 750 pixel...
- SahAssar 6y agoYeah, but the same is true for desktops/laptops that use scaling. I think that people are used to the fact that 1 render pixel does not always equal 1 physical pixel.
- hawski 6y agoSo the html looks as god intended on mobile devices. It became necessary, because web pages squeezed to mobile sizes were looking terrible with all those sidebars bent and excessive padding and margins. So Apple (I believe it was them) made this workaround, by default your phone renders pages scaled, like it's a window to your desktop computer's maximized browser. Then it looked good. But what about pages that are responsive or just look good no matter the window size? That's the line that needs to be there.
- dheera 6y ago> <meta name=viewport content="width=device-width,initial-scale=1"> This is a cat and mouse game. iOS 14 doesn't respect user-scalable=no or maximum-scale, unfortunately. What you need to do is this now, if you don't want the web browser to respond to scaling (and as much as the idiots at Apple love their high horses, there are actual use cases for this, including when you are building a webapp or when you are building a web page with your own pinch zoom logic): <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style>body { touch-action: pan-x pan-y; }</body> Basically, Apple tries hard to break HTML5 apps at every new iOS release.
- hvdijk 6y agoAre you surprised? If every damn website out there starts copying and pasting the same thing regardless of whether it makes sense, and it makes the iOS user experience worse as a result, of course they're going to change things. Their priority should be their users. It sucks for those that actually have a valid reason for it but there's no way to separate those automatically.
- dheera 6y agoThe problem is the OS zooming fights against pinch zooming that you may implement inside your webapp's logic, especially for non-static content (maps for example), multi-finger games where two touches don't signify a zoom, etc. They just broke the UX of a whole bunch of websites. When will we ever have HTML5 apps that match native apps? When they actually let HTML5 apps do what native apps do, like multitouch without triggering a default action.
- hvdijk 6y agoNo, that's not the problem. Remember, developers are a minority, users are the majority, so making things work well for users takes priority over making things work well for developers. When functionality that's useful for webapps is misused for websites where it has no place and where it breaks the user experience, the only way to improve things for users is to make things harder for developers.
- Thainbbdl 6y agoWhile not closing tag or using head / body element is a matter of taste, not using the HTML element with a proper lang attribute and missing the title element can lead to accessibility issues.
- hawski 6y agoI guess you're right. The lang attribute is useful. I'll add it to my personal template. I omitted the title, but it's a part of the content for me. This way I can use the simplest SSG there is: cat.
- conaclos 6y agoI prefer a parser-friendly template that makes Web Scraping easy. My template [1] is both parsable by HTML5 and XML processors. [1] https://github.com/Conaclos/origin.html/blob/master/template/origin.html https://github.com/Conaclos/origin.html/blob/master/template...
- jfk13 6y ago> font:menu;font-size:1.125em; As a default for otherwise-unstyled content, it's not very user-friendly to override the user's default font and size preferences. The browser lets me decide how I'd like unstyled text to appear. Unless you're explicitly doing typographic design, please don't arbitrarily override my choice.
- hawski 6y agoI hear you. But this battle is lost for a long time, isn't it? You already know, that if you allow CSS things will happen. I would personally not do this if browsers would have sensible defaults, but IMO they don't. Mostly it is a matter of backward compatibility. Also I'm using font:menu so theoretically the same as your browser is using. Depending on your browser/OS you can change the font for all, not ideal, but doable. Similar to how every browser has different settings for your preferred fonts. But in Firefox for example you can deselect "Allow pages to choose their own fonts, instead of your selections above" and you're done. I'm saying all this as a person wanting to implement a modern html-only browser to make all those obnoxious stylesheets go away.
- jfk13 6y agoI don't see why you'd think font:menu is appropriate for the general body of web content. Menus are a UI element that normally contain just a few isolated words or very short phrases. Recognizing words in such a context is not the same as reading textual content on a page. A font chosen for one may not be well suited to the other. If your issue is that many browsers default to a serif font, and you really dislike that, maybe setting font-family:sans-serif would be better? At least that's intended to be suitable for content, rather than UI.
- easrng 6y agoYou should use system-ui, sans-serif to avoid abusing the semantics of menu.
- Mauricebranagh 6y agoErm WTF your going to have problems using things like GTM and GA for a start. Just blatantly breaking standards like this is not a good idea seen some real howlers from sprint back when I worked on x.400.
- Symbiote 6y agoNot using either of those things sounds like a benefit.
- Mauricebranagh 6y agoYeh want to justify your ROI you will :-) And using GTM instead of hand coding every thing is a win
- hawski 6y agoW3C HTML5 validator will issue a single warning for not having an openning html tag with the lang attribute. Other than that there are no errors. It is not breaking any standards. As sibling commented I would just add the html tag with the lang attribute. I don't use GTM or GA or almost any JavaScript whatsoever.
- megous 6y agoNo standards are broken here. Maybe you can bother to read them: https://html.spec.whatwg.org/#optional-tags https://html.spec.whatwg.org/#optional-tags There will also be no issue including GTM/GA or other scripts.