I'll get to that when I think of a good CSS solution. Margin in CSS is sort of finicky.
But anyway, I've been looking into usability of this site. If a site is not usable on mobile devices, Google will demote it
in results from searches that are performed on mobile devices
. I worry that Google is demoting our site for not being mobile-friendly.
By default, web browsers for mobile phones assume that the page is formatted for a 980px-wide viewport, lay it out for such a window, and zoom it out to the screen's width. This usually produces unreadably small text. A website can override this assumption by placing the following element inside its <head>
Code: Select all
<meta name="viewport" content="width=device-width">
This reduces the viewport width to the width of the device, usually 320px to 480px wide for a phone, or bigger for a tablet. (In CSS, 1px is not a pixel but instead roughly 1/2700 of the distance from the eye to the display.) And at this viewport width, the browser doesn't need to zoom out, which causes text to be readable.
Another common problem is making links too small and putting them too close together. With the demise of the stylus everywhere but on Nintendo devices and Galaxy Note phones, input on mobile devices usually means a finger. Links too close together (less than about 40px) may cause the browser to have to zoom in to confirm which link was intended, or they may cause the user to activate the wrong link.
The front page of the site
. The page has a viewport tag, which causes the browser to give text a readable size, and links are big. It also has a media query breakpoint, so that it'll put one "button" across the width of the page instead of two if the viewport is not wide enough for two.
is also mobile-friendly
now that I have added the viewport tag as well as a CSS rule that adds some margin above and below <li>
elements to push links farther apart. But the "Site Index" at the top will need a redesign to use <li>
instead of <br>
to separate items. It has been suggested to move the archive to a page on the wiki, with an available prototype
In my opinion, many user interface design techniques to convey information on a phone's small screen are also useful to convey information in the 224x192 usable pixels in the safe area of the NES picture.