Tuesday, February 23, 2016

Mobile-friendly web page

Decided it's time to make my websites mobile-friendly, since Google seems to consider that important these days. So I ran the tester at
which identified about 30 errors, including "Links too close together" and "Text too small to read" on multiple items. The latter error is particularly interesting because I typically use not-too-fancy html+css, and I don't set the font size anywhere. One of the main features of html is the separation of content and presentation, so decently written html should not require much tweaking for different displays. The html markup tells what things are, and the browser should be able to figure out a reasonable way of displaying those things.

After a little digging, I found the first step in mobilifying a web page is to add the magic incantation:
  •  <meta name=viewport content="width=device-width, initial-scale=1">
to the <head> section of the html file.

As it turns out, that's the last step as well: All the other error messages went away when I added that one line. As I understand it, that line basically tells the browser "just use html the way it's intended to be used" and then everything is fine.

No comments: