Going Mobile

Making the page look good on phones and tablets


It's a lot easier to design a web page for mobile devices than you might think. If you keep your HTML simple, like in our retro-fabulous 90s web page design, there's really only one little addition to make.

<meta name="viewport" content="width=device-width, initial-scale=1">

That's it. One little meta tag does the job. And it does this by telling the mobile browser not to scale the page. In other words, don't try to be helpful and show only a portion of the page while letting the user pan around to see the rest.

We can get away with this because of a Cascading Style Sheet (CSS) property called max-width. By applying max-width to the body element of the page, we can guarantee that its contents will never flow outside the boundries we have set.

<body style='max-width: 640px'>

Since you would be hard-pressed to find a smartphone these days with a display resolution of less than 720p, the 640 pixel max-width should easily fit on the phone's screen.


Back | Home | Next